Row、Column的介绍
Row:水平布局,在水平方向上排列子widget的列表。
Column:垂直布局,在垂直方向上排列子widget的列表。
说明:Row和Column是多子节点空间,他们不带滚动属性,如果超出了一行,在debug下面则会显示溢出的提示。
属性
-
mainAxisAlignment:主轴对齐方式,可以选择start、end、center、spaceBetween、spaceAround、spaceEvenly;
-
mainAxisSize:主轴大小,可以选择min、max;
-
crossAxisAlignment:横轴对齐方式;
-
textDirection:文字方向;
-
verticalDirection:垂直方向;
-
children:子控件。
start: 子部件在主轴上靠近起始位置对齐。在水平 Row 中,它们将靠左对齐,在垂直 Row 中,它们将靠顶部对齐。
end: 子部件在主轴上靠近结束位置对齐。在水平 Row 中,它们将靠右对齐,在垂直 Row 中,它们将靠底部对齐。
center: 子部件在主轴上居中对齐。无论是水平 Row 还是垂直 Row,它们都将在主轴上居中对齐。
spaceBetween: 子部件在主轴上均匀分布,两端靠近容器边界。这意味着第一个子部件靠近起始位置,最后一个子部件靠近结束位置,中间的子部件平均分布在它们之间。
spaceAround: 子部件在主轴上均匀分布,包括两端和之间。这会在每个子部件周围创建相等的空间,使得子部件之间的间距相等,同时最后一个子部件靠近结束位置,第一个子部件靠近起始位置。
spaceEvenly: 子部件在主轴上均匀分布,并且两端靠近容器边界。这与 spaceBetween 相似,但不会让子部件靠近容器边界,而是在两端和之间均匀分布空间。
Expanded
这个是Row/Column的内的小控件,可以用来实现权重的布局,这个很有用。它必须是Row、Column或Flex的后代,并且从Expanded到其封闭行、列或Flex的路径必须仅包含StatelessWidget或StatefulWidget(而不是其他类型的小部件,如RenderObjectWidget)。
实例
Container(
color: Colors.grey,
padding: EdgeInsets.only(top: 10, bottom: 10),
margin: EdgeInsets.only(top: 10),
child: Row(
children: [
Expanded(
child: Text(
'Deliver features faster',
textAlign: TextAlign.center,
),
flex: 1,
),
Expanded(
flex: 1,
child: Text(
'Craft beautiful UIs',
textAlign: TextAlign.center,
),
),
Expanded(
child: FlutterLogo(),
flex: 1,
),
Expanded(child: FlutterLogo(),
flex: 1,
),
FlutterLogo(),
Expanded(
child:FittedBox(
fit: BoxFit.contain,
child: FlutterLogo(),
)
),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: FlutterLogo(),
),
)
],
),
),
这里举了一个Row的例子,Column的使用类似。
效果如图
结束语 Flutter是一个由Google开发的开源UI工具包,它可以让您在不同平台上创建高质量、美观的应用程序,而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧,从UI设计到性能优化,欢饮关注一起讨论学习,共同进入Flutter的精彩世界!