如何进行Flutter布局开发
- Container
- RendderObjectWidget
- SingleChildRenderObjectWidget(单节点)
- Opacity
- ClipOval
- ClipRRect
- PhysicalModel
- Align Center
- Padding
- SizedBox
- FractionallySizedBox
- MultChildRenderObjectWidget(多节点)
- Stack与Positioned配合使用
- Row
- Column
- Wrap
- ParentDataWidget
- Positioned
- Flexible Expanded
Container
Container参数 | 类型 | 说明 |
width | double | 宽度 |
height | double | 高 |
child | Widget | 子容器内容 |
alignment | AlignmentGeometry | AlignmenttopLeft … Alignment.bottomRight 设置子Widget位置(这里注释很清楚,就不在过多解释了)
|
padding | EdgeInsetsGeometry | 外边距 |
color | Color | 容器颜色 |
decoration | Decoration(BoxDecoration) | 装饰器,通常使用BoxDecoration |
margin | EdgeInsetsGeometry | 外边距 |
这里主要给大家介绍一下这个BoxDecoration参数!
BoxDecoration参数 | 类型 | 说明 |
gradient | Gradient | 用来设置渐变色 类型:SweepGradient RadialGradient LinearGradient |
color | Color | 设置颜色,注意:这里的Color设置的颜色不能与Container颜色重复(渐变背景会覆盖color) |
border | Border | Border.all设置所有边框 Border(top: BorderSide(color: 颜色, width: 粗细)上边框, right: 左边框 ,bottom:下边框, left:右边框,) |
borderRadius | BorderRadius | 圆角(此属性会把border边框属性取消掉) |
boxShadow | List<BoxShadow> | 背景阴影(可以设置多个) |
image | NetworkImage | 用来设置网络图片,会覆盖color属性 |
Container(
margin: EdgeInsets.all(50),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1744362770,1889985818&fm=11&gp=0.jpg")),
//image会覆盖color!
color: Colors.black,
//渐变背景 渐变色会覆盖color
// SweepGradient
// RadialGradient
// LinearGradient
gradient: LinearGradient(
begin: Alignment.topRight, //LinearGradient属性
end: Alignment.bottomLeft, //属性
colors: [
Colors.blue.withOpacity(0.3),
Colors.black.withOpacity(0.3),
Colors.red.withOpacity(0.3),
Colors.yellow.withOpacity(0.3),
]),
// border: Border.all(
// color: Colors.red,
// width: 3,
// ),
//边框 borderRadius圆角 属性会取消掉这个
border: Border(
top: BorderSide(color: Colors.blue, width: 3), // 上边边框
right: BorderSide(color: Colors.red, width: 4), // 右侧边框
bottom: BorderSide(color: Colors.yellow, width: 5), // 底部边框
left: BorderSide(color: Colors.cyan, width: 6)), // 左侧边框
//圆角 圆角属性会把边框取消掉!!
borderRadius: BorderRadius.all(Radius.circular(200)),
boxShadow: [
BoxShadow( // 设置第一个阴影效果
color: Colors.green, // 阴影颜色为绿色
offset: Offset(-20, -20),//设置偏移
blurRadius: 10, // 模糊半径为10
spreadRadius: 10), // 延伸半径为10
BoxShadow( // 增加第二个阴影
color: Colors.yellow, // 阴影颜色为黄色
offset: Offset(10, 10), // 右下方偏移10
blurRadius: 20,
spreadRadius: 20),
]
),
);效果图:
RendderObjectWidget
SingleChildRenderObjectWidget(单节点)
Opacity
透明度组件
Opacity参数 | 类型 | 说明 |
opacity | double | 最大值1,最小值0用来设置透明度 |
child | Widget | 设置子Widget |
alwaysIncludeSemantics | bool | (我还没看出有什么效果) |
Opacity(
opacity: 0.8,
alwaysIncludeSemantics: false,
child: Image.network("http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",width: 100,height: 150,),
)效果图:
ClipOval
圆角组件
ClipOval参数 | 类型 | 说明 |
clipBehavior | Clip | Clip.none不设置圆角(注释很清晰,还有很多,可以分别试一下)
|
child | Widget | 子Widget组件 |
ClipOval(
// clipBehavior: Clip.none,//不设置圆角
child: Image.network(
"http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",
width: 100,
height: 150,
)效果图:
ClipRRect
矩形组件
ClipRRect参数 | 类型 | 说明 |
borderRadius | BorderRadius | 设置圆角 |
child | Widget | 子Widget |
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: Image.network(
"http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",
width: 100,
height: 150,
),
)效果图:
PhysicalModel
设置组件变换类型控件
注:加粗的是必加参数:
PhysicalModel参数 | 类型 | 说明 |
borderRadius | BorderRadius | 设置圆角 |
clipBehavior | Clip | 比价参数抗锯齿Clip.antiAlias |
shape | BoxShape | BoxShape.circle设置圆角 默认是BoxShape.rectangle |
elevation | double | 设置阴影 |
color | Color | 必加参数一般设置为透明Colors.transparent |
shadowColor | Color | 阴影颜色 |
child | Widget | 子Widget |
直接上代码(拿改变PageView举例)
Container(
height: 200,
margin: EdgeInsets.all(30),
alignment: Alignment.center,
child:PhysicalModel(
borderRadius: BorderRadius.circular(20),
clipBehavior: Clip.antiAlias, //设置抗锯齿 这个必须加!!
shape: BoxShape.circle,//设置圆角
elevation: 20,
color: Colors.transparent,
shadowColor: Colors.greenAccent,//阴影颜色
child: PageView(
children: <Widget>[
initPageViewItem("Page1", Colors.white),
initPageViewItem("Page2", Colors.yellow),
initPageViewItem("Page3", Colors.red),
],
),
)
)效果图:
Align Center
居中控件
Center继承自Align,他只是隐藏了alignment.center属性,可能会觉得很没用,但确实如此(这些控件都很简单,就不在墨迹啦)
Center(
child: Text("居中了??"),
)效果图:
Padding
内边距组件
Padding(
padding: EdgeInsets.only(left: 60),
child: Text("我已经向左移动了"),
)效果图:
SizedBox
控制容器大小组件
这个组件我现在还没发现他的优势之处,甚至感觉有点多余…就三个参数width,height,child.
SizedBox(
width: 100,
height: 100,
child: Container(
padding: EdgeInsets.only(top: 30),
color: Colors.green,
),
)
FractionallySizedBox
宽度占满组件
FractionallySizedBox参数 | 类型 | 说明 |
alignment | AlignmentGeometry | 居中方式(没什么用,因为要占满屏幕宽度) |
widthFactor | double | 最大值1,最小值0,设置宽度比例 |
child | Widget | 子Widget |
heightFactor | double | 没用 |
FractionallySizedBox(
widthFactor: 0.9,
child: Container(
padding: EdgeInsets.only(top: 30),
alignment: Alignment.center,
color: Colors.yellow,
child: Text("FractionallySizedBox",style: TextStyle(fontSize: 10),),
),
)效果图:
MultChildRenderObjectWidget(多节点)
Stack与Positioned配合使用
相当于Android中Fragment
Stack参数 | 类型 | 说明 |
fit | StackFit | 我没看到具体效果 |
overflow | Overflow | 我没看到具体效果 |
textDirection | TextDirection | 我没看到具体效果 |
children | List<Widget> | 设置子Widget |
alignment | AlignmentGeometry | Widget位置 |
Positioned参数 | 类型 | 说明 |
left | double | 距离左边位置 |
top | double | 距离上边位置 |
right | double | 距离右边位置 |
bottom | double | 距离下边位置 |
width | double | 宽 |
height | double | 高 |
Stack(
fit: StackFit.passthrough,//我没看出效果
overflow: Overflow.clip,//我没看出效果
textDirection: TextDirection.ltr,//我没看出效果
alignment: Alignment.topRight,//我没看出效果
children: <Widget>[
Image.network("http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",width: 100,height: 150,),
Positioned(
left: 0,
top: 0,
child: Image.network("http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",width: 20,height: 30,),
)
],
)效果图:
Row
相当于Android中LinearLayout垂直方向布局
Row参数 | 类型 | 说明 |
crossAxisAlignment | CrossAxisAlignment | CrossAxisAlignment.start：子组件在 Row 中顶部对齐。 CrossAxisAlignment.end：子组件在 Row 中底部对齐。 CrossAxisAlignment.center：子组件在 Row 中居中对齐。 CrossAxisAlignment.stretch：拉伸填充满父布局。 CrossAxisAlignment.baseline：在 Row 组件中会报错。 |
mainAxisAlignment | MainAxisAlignment | MainAxisAlignment.start：靠左排列。 MainAxisAlignment.end：靠右排列。 MainAxisAlignment.center：居中排列。 MainAxisAlignment.spaceAround：每个子组件左右间隔相等，也就是 margin 相等。 MainAxisAlignment.spaceBetween：两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列。 MainAxisAlignment.spaceEvenly：每个子组件平均分散排列，也就是宽度相等。 |
mainAxisSize | MainAxisSize | MainAxisSize.max：相当于 Android 的 match_parent。 MainAxisSize.min：相当于 Android 的 wrap_content。 |
textDirection | TextDirection | TextDirection.rtl从右往左排列 TextDirection.ltr从左往右排列,默认是从左往右 |
verticalDirection | VerticalDirection | VerticalDirection.up：Row 从下至上开始摆放子组件，此时我们看到的底部其实是顶部。 VerticalDirection.down：Row 从上至下开始摆放子组件，此时我们看到的顶部就是顶部。 |
children | List<Widget> | 子Widget |
这里代码太多了,就不粘贴了,等最后查看完整代码吧:
效果图:
Column
相当于Android中LinearLayout水平方向布局
属性和Row完全一样,不一样的只是一个是水平,一个是垂直,这里就不在写重复代码了.
Wrap
相当于Android中LinearLayout垂直方向布局,区别于Row是Wrap会自动换行
Wrap参数 | 类型 | 说明 |
direction | Axis | 排列方式默认Axis.horizontal水平排列 Axis.vertical垂直排列 |
alignment | WrapAlignment | 对齐方式(自己去看)
|
spacing | double | 左右间距 |
runSpacing | double | 上下间距 |
runAlignment | WrapAlignment | 上下对齐方式 |
textDirection | TextDirection | TextDirection.rtl从右往左排列 TextDirection.ltr从左往右排列,默认是从左往右 |
children | Widget | 子Widget |
verticalDirection | VerticalDirection | VerticalDirection.up从下往上排列 VerticalDirection.down从上往下排列 默认是从上往下排列 |
Container(
child: Wrap(
direction: Axis.horizontal,//排列方式
alignment: WrapAlignment.end,//对齐方式
spacing: 5, //间距
runSpacing: 20, //上下间距
runAlignment: WrapAlignment.spaceBetween,
textDirection: TextDirection.rtl,
verticalDirection: VerticalDirection.down,
children: <Widget>[
initChipItem("Flutter"),
initChipItem("Java"),
initChipItem("C++"),
initChipItem("Java"),
initChipItem("Flutter"),
initChipItem("C#"),
initChipItem("PHP"),
initChipItem("HTML"),
initChipItem("Flutter"),
initChipItem("Java"),
initChipItem("Pathon"),
initChipItem("Flutter"),
initChipItem("switch"),
],
),
)
initChipItem(String lable) {
return Chip(
label: Text(lable),
avatar: CircleAvatar(
backgroundColor: Colors.black87,
child: Text(lable.substring(0, 1)),
), //圆形头像
);
}注:使用Chip需要使用Scaffold包裹!
来看看效果吧:
ParentDataWidget
Positioned
用于固定Widget位置,常配合Stack使用
Flexible Expanded
展开,常用于占满父容器垂直高度
没什么难度,代码也一行,直接上代码了
Expanded(
child: Container(
color: Colors.red,
),
)
