目录
1.Row
在水平方向上布置子窗口小部件列表
属性:
Row主轴为横轴
children → List<Widget>:包含在Row内的子部件集合
crossAxisAlignment → CrossAxisAlignment:子部件在非主轴上的摆放方式
mainAxisAlignment → MainAxisAlignment:子部件主轴摆放方式
mainAxisSize → MainAxisSize:主轴占用空间大小
textBaseline → TextBaseline:字符对齐方式
textDirection → TextDirection:确定水平放置子部件的顺序。
属性示例
Row(
crossAxisAlignment: CrossAxisAlignment.center,//非主轴上填充方式
mainAxisAlignment: MainAxisAlignment.spaceBetween,//主轴填充方式
mainAxisSize: MainAxisSize.max,//宽度大小
textBaseline: TextBaseline.ideographic,//字符对齐方式
textDirection: TextDirection.rtl,//从右到左
children: <Widget>[
Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
Container(color:Colors.amber,child: Text("3",style: TextStyle(fontSize:80,color: Colors.white))),
Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
Container(child: Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white)))),
],
);
其它示例
要使子项扩展以填充可用的水平空间,请将子项包装在 Expanded widget中。
示例一:(子部件未包在Expanded中)图下左
适应子部件大小
Row(
children: <Widget>[
Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
Container(color:Colors.amber,child: Text("3",style: TextStyle(color: Colors.white))),
Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white))),
],
);
示例2(子部件包含在Expanded中)图上右
子部件调整自身大小以适应父部件大小 并且根据flex因子大小分配空间
children: <Widget>[
Expanded(
flex: 2,
child: Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
),
Expanded(
child: Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
),
Expanded(
child: Container(color:Colors.amber,child: Text("3",style: TextStyle(color: Colors.white))),
),
Expanded(
child: Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
),
Expanded(
child: Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white))),
),
],
);
异常提醒
Row 部件不会滚动(并且通常将行中的子项多于可用空间中的子项视为错误)
若宽度超过父部件宽度则会在超出侧显示黄黑线以提示开发者
官方示例
示例1(超过父部件宽度)显示提醒 左下图
Row(
children: <Widget>[
const FlutterLogo(),
const Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
const Icon(Icons.sentiment_very_satisfied),
],
)
示例2(以Expanded包裹Text 使子部件调整自身宽度以适应父部件宽度)右上图
Row(
children: <Widget>[
const FlutterLogo(),
const Expanded(
child: Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
),
const Icon(Icons.sentiment_very_satisfied),
],
);
2.Column
在垂直方向上布置子窗口小部件列表
属性:
Column主轴为纵轴
children → List<Widget>:包含在Column内的子部件集合
crossAxisAlignment → CrossAxisAlignment:子部件在非主轴上的摆放方式
mainAxisAlignment → MainAxisAlignment:子部件主轴摆放方式
mainAxisSize → MainAxisSize:主轴占用空间大小
textBaseline → TextBaseline:字符对齐方式
verticalDirection → VerticalDirection:确定垂直放置子部件的顺序。
属性示例
Column(
crossAxisAlignment: CrossAxisAlignment.center,//非主轴上填充方式
mainAxisAlignment: MainAxisAlignment.spaceBetween,//主轴填充方式
mainAxisSize: MainAxisSize.max,//宽度大小
textBaseline: TextBaseline.ideographic,//字符对齐方式
verticalDirection: VerticalDirection.up,//倒序排列
children: <Widget>[
Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
Container(color:Colors.amber,child: Text("3",style: TextStyle(fontSize:80,color: Colors.white))),
Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
Container(child: Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white)))),
],
);
其它示例
要使子项扩展以填充可用的垂直空间,请将子项包装在 Expanded widget中。
示例一:(子部件未包在Expanded中)图下左
适应子部件大小
Row(
children: <Widget>[
Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
Container(color:Colors.amber,child: Text("3",style: TextStyle(color: Colors.white))),
Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white))),
],
);
示例2(子部件包含在Expanded中)图上右
子部件调整自身大小以适应父部件大小 并且根据flex因子大小分配空间
Column(
children: <Widget>[
Expanded(
flex: 2,
child: Container(color:Colors.blue,child: Text("1",style: TextStyle(color: Colors.white))),
),
Expanded(
child: Container(color:Colors.red,child: Text("2",style: TextStyle(color: Colors.white))),
),
Expanded(
child: Container(color:Colors.amber,child: Text("3",style: TextStyle(color: Colors.white))),
),
Expanded(
child: Container(color:Colors.deepPurple,child: Text("4",style: TextStyle(color: Colors.white))),
),
Expanded(
child: Container(color:Colors.green,child: Text("5",style: TextStyle(color: Colors.white))),
),
],
);
异常提醒
Column 部件不会滚动(并且通常将行中的子项多于可用空间中的子项视为错误)
若宽度超过父部件高度则会在超出侧显示黄黑线以提示开发者
官方示例
示例1(超过父部件高度)显示提醒 左下图
Column(
children: <Widget>[
Column(
children: <Widget>[
const FlutterLogo(),
const Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
const Icon(Icons.sentiment_very_satisfied),
],
)
],
);
示例2(以Expanded包裹Text 使子部件调整自身宽度以适应父部件高度)右上图
因Column不可滚动纵向超出高度后可添加ListView使超出部件可以滚动
Column(
children: <Widget>[
const FlutterLogo(),
Expanded(
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.');
},
),
),
const Icon(Icons.sentiment_very_satisfied),
],
);
3.Stack
一个可以将子部件重叠摆放的部件
属性
alignment → AlignmentGeometry:子部件对齐方式
fit → StackFit:若Stack中子部件未定位 子部件约束方式
overflow → Overflow:子部件溢出部分是否裁剪
textDirection → TextDirection:子部件排列方向
示例
Stack(
alignment: Alignment.topRight,
fit: StackFit.passthrough,
textDirection: TextDirection.ltr,
overflow: Overflow.visible,//溢出部分可见
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 200,
height: 200,
color: Colors.green,
),
Positioned(
right: 100,
top: 100,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
),
],
);
overflow: Overflow.visible overflow: Overflow.clip fit: StackFit.expand
(溢出部分可见) (溢出部分裁剪) (子部件填充方式expand)
4.IndexedStack
一个只显示子部件列表中一个部件的部件
其大小是子部件列表中最大的大小
属性
alignment → AlignmentGeometry:子部件对齐方式
fit → StackFit:若子部件未定位 子部件约束方式
textDirection → TextDirection:子部件排列方向
示例
IndexedStack(
alignment: Alignment.center,
textDirection: TextDirection.ltr,
index: 0,
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Text(
'123'
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
);
显示第一个子部件
5.GridView
一个可以滚动的网格部件
示例一
@override
Widget build(BuildContext context) {
List<String> list = List<String>();
for(var i = 0;i<100;i++){
list.add(i.toString());
}
return
GridView.count(
primary: true,
padding: const EdgeInsets.all(10.0),//内边距
crossAxisSpacing: 10.0,//非主轴间距
mainAxisSpacing: 10.0,//主轴间距
crossAxisCount: 4,//非主轴数量
scrollDirection: Axis.vertical,//主轴方向
children: list.map((item) => getItem(item)).toList(),
);
}
Widget getItem(String item){
return Card(
color: Colors.red,
elevation: 10.0,
clipBehavior: Clip.antiAlias,
child: Text(item,style: TextStyle(color: Colors.white,fontSize: 40,fontStyle:FontStyle.italic,fontWeight:FontWeight.bold),),
);
示例二
@override
Widget build(BuildContext context) {
List<String> list = List<String>();
for(var i = 0;i<100;i++){
list.add(i.toString());
}
return
GridView.builder(
primary: true,
itemCount: list.length,
padding: const EdgeInsets.all(10.0),//内边距
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (BuildContext context, int index){
return getItem(list[index]);
},
scrollDirection: Axis.horizontal,//主轴方向
);
}
Widget getItem(String item){
return Card(
color: Colors.red,
elevation: 10.0,
clipBehavior: Clip.antiAlias,
child: Text(item,style: TextStyle(color: Colors.white,fontSize: 40,fontStyle:FontStyle.italic,fontWeight:FontWeight.bold),),
);
}
6.Flow
一个根据FlowDelegate规则,重新调整和定位子部件的部件。
属性
delegate → FlowDelegate:子部件矩阵变换规则
示例
class MyFlow extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return FlowState();
}
}
class FlowState extends State<MyFlow>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Flow(
delegate: MyDelegate(),
children: <Widget>[
Center(child: Text('1111')),
Center(child: Text('2222')),
],
);
}
}
class MyDelegate extends FlowDelegate{
@override
void paintChildren(FlowPaintingContext context) {
context.paintChild(0,transform:Matrix4.rotationZ(0));
context.paintChild(1,transform:Matrix4.rotationZ(0.2));
}
@override
bool shouldRepaint(FlowDelegate oldDelegate) {
return true;
}
}