Flutter学习:(3)编写Flutter Demo
1.Mac 电脑 Flutter安装:https://flutter.dev/docs/get-started/install/macos2.启动 VS Code,打开Command Pallete3.选择Flutter: New Project来创建Flutter项目helloworld,也可使用命令 flutter create helloworld来创建4.替换 lib/mai...
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内使用
更多推荐



所有评论(0)