1.Mac 电脑  Flutter安装:https://flutter.dev/docs/get-started/install/macos

2.启动 VS Code,打开Command Pallete

3.选择Flutter: New Project来创建Flutter项目helloworld,也可使用命令 flutter create helloworld来创建

4.替换 lib/main.dart 文件里的示例代码为在页面中央打印Hello World

5.选择菜单 Device > Start Debugging (或者按F5键)来运行和调试应用

6.选择用来容纳组件的布局组件,比如Center,Container,Row,Column 等

7.创建用来容纳可见内容的组件,比如Text,Image,Icon等

8.将可见组件添加到布局组件里,通过传递给属性child或children

9.将布局组件添加到页面组件里,一般在其build方法里完成

10.对Row和Column,可以控制其主轴和交叉轴方向上子组件的对齐方式

11.标准布局组件

  - Container给组件添加填充、边距、边框,背景色等装饰

  - GridView 可滚动的网格

  -  ListView可滚动的列表

  - Stack重叠组件

- Material布局组件

   - Card将相关的组件放到一个卡片里,该卡片带有圆角和阴影 

   - ListTile带有标题和副标题的行,首位可以添加图标

- GridView

   - 用于二维列表

   - 当内容超过渲染区域时将自动滚动

   - 如果需要知道单元所处的行和列,请使用Table或DataTable

- ListView

   - 特定化的Column,不如Column可定制性强,但更易使用和支持滚动

   - 支持垂直或水平滚动

- Stack

   - 用来重叠多个组件

   - 子组件列表里后面的重叠在前面之上

   - 里面的内容无法滚动

   - 超过渲染区域的内容可剪切掉

- Card

   - 用来呈现一组相关的信息

   - 只接受一个子组件,但子组件可以是Row,Column这样的接受多个子组件的组件

   - 带圆角和阴影

   - 内容不能滚动

   - 需在MaterialApp内使用

- ListTile

    - 特定化的Row,包含最多三行文字,以及可选的图标

    - 可定性不如Row,但更易使用

    - 需在MaterialApp内使用

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐