组件1：MaterialApp、Container、Text、Image、Icon
组件2：ListView、GridView
组件3：Padding、Row 、Column、Stack、Align、Positioned
组件4：AspectRatio、Row 、Button
组件5：Wrap、StatelessWidget 、StatefulWidget、Dialog、PageView、TextField
3.12 AspectRatio
AspectRatio 的作用是根据设置调整子元素child的宽高比，Flutter提供此组件，就免去了自定义所带来麻烦，AspectRatio适用于需要固定宽高比的情景，类似于BoFit中的Container，按照固定比率去尽量占满区域
如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略所设置的比率
const AspectRatio({
Key key,
@required this.aspectRatio, //宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，这只是一个参考值
Widget child, // 子组件
})
3.13 Card
Card 是 flutter 提供的一个卡片组件，提供了圆角和阴影，实际用途其实和 Container 差不多。
Card 其实就是 Container 带了一个默认的圆角和阴影，没有太多属
| 名称 | 功能 |
|---|---|
| color | 表示离Stack 左 边的 |
| shadowColor | 阴影颜色 |
| elevation | 阴影高度 |
| shape | 形状 BorderShape |
| borderOnForeground | 是否在 child 前绘制 border，默认为 true |
| margin | 外边距 |
| clipBehavior | 裁剪方式 |
| child | 子控件 |
| semanticContainer | 是否使用新的语义节点，默认为 true。语义这个东西用途没有那么大，不用太过在意，在看页面层级的Debug 模式下组件展示方式会按照设置的语义标签展示。 |
3.14 CircleAvatar
设置圆形头像时了解到 CircleAvatar 组件，Flutter 提供了很多绘制圆形的方法；CircleAvatar 比较特殊，通常用于用户图片和内容一同展示，且为了保持效果一致，给定用户的姓名缩写应始终与相同的背景色配对；
const CircleAvatar({
Key key,
this.child, // 子 Widget
this.backgroundColor, // 背景色
this.backgroundImage, // 背景图
this.foregroundColor, // 子 Widget 颜色
this.radius, // 半径
this.minRadius, // 最小半径
this.maxRadius, // 最大半径
})
/**
* 发现不添加Align时，CircleAvatar并没有显示为圆形，
* 设置child为要显示的url时，并不能显示为圆形，只有设置backgroundColor或者backgroundImage时才显示为了圆形
* radius和minRadius与maxRadius不能同时使用;
* ClipOval不在Align里面时也不能显示为圆形，ClipOval中image设置为fit: BoxFit.fill才能显示为圆形；
* BoxDecoration不在Align里面时也不能显示为圆形，BoxDecoration中image设置为fit: BoxFit.fill才能显示为圆形；
*/
return CircleAvatar(
radius: 40.0,
backgroundImage: index != 0
? NetworkImage('https://locadeserta.com/game/assets/images/background/landing/1.jpg')
: AssetImage('images/icon_hzw01.jpg'));
3.15 按钮组件
3.15.1 普通按钮
- TextButton - 文本按钮
- OutlineButton - 边框按钮
- ElevatedButton - 普通按钮
3.15.2 按钮属性
| 名称 | 功能 |
|---|---|
| onPressed | 点击事件 |
| onLongPress | 长按事件 |
| child | 子组件 |
| style | 自定义样式 |
3.15.3 ButtonStyle属性
| 名称 | 功能 |
|---|---|
| textStyle | 字体样式 |
| foregroundColor | 按钮点击时字体样式 |
| backgroundColor | 背景色 |
| shadowColor | 阴影 |
| elevation | 阴影长度 |
| side | 边框 |
| shape | 圆角 |
| minimumSize | 按钮大小 |
| overlayColor | 水波纹的颜色 |
3.15.4 主题相关的按钮
- TextButtonTheme - 文本按钮
- OutlinedButtonTheme- 边框按钮
- ElevatedButtonTheme - 普通按钮
注意：如果设置style 样式，则主题样式不生效
3.15.5 IconButton - 图标按钮
-
TextButton.icon - 图标文本按钮
-
OutlineButton.icon - 图标边框按钮
-
ElevatedButton.icon - 图标普通按钮
-
IconButton - 图标按钮
3.15.6 其他按钮
- ButtonBar - 按钮组
- BackButton - 回退按钮
- CloseButton - 关闭按钮
- FloatingActionButton - 浮动按钮
注意：浮动按钮配合Scaffold使用，与appBar、body 等是同级
3.15.7 按钮大小
可以通过设置按钮的样式
ElevatedButton(
style: ButtonStyle(
// 最小的长宽，如果内容过多，按钮的长度会变长
minimumSize: MaterialStateProperty.all(Size(100, 100))),
child: const Text("ElevatedButton 普通按钮"),
onPressed: () {},
),
还可以通过给按钮的外层加一个组件。例如Container 或者 SizeBox，这样按钮就会跟外层组件一样大。
网友评论