Flutter控件以及UI学习汇总

最新推荐文章于 2025-07-06 22:41:20 发布

原创最新推荐文章于 2025-07-06 22:41:20 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

3 篇文章

订阅专栏

本文深入解析Flutter中的线性布局Row和Column的使用技巧，包括textDirection、verticalDirection、mainAxisSize、mainAxisAlignment、crossAxisAlignment等属性的详细说明，以及它们如何影响子Widgets的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：布局
1.1、线性布局（Row、Column）
 - textDirection：水平方向子widget的布局顺序
 	TextDirection.rtl：从右到左
 	TextDirection.ltr：从左到右
 - verticalDirection：表示Row纵轴（垂直）的对齐方向，默认是VerticalDirection.down
	VerticalDirection.down：表示从上到下
	VerticalDirection.up：表示从下到上
 - mainAxisSize：表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max
 	MainAxisSize.max：Row的宽度始终等于水平方向的最大宽度
 	MainAxisSize.min：Row的实际宽度等于所有子widgets占用的的水平空间
 - mainAxisAlignment：表示子Widgets在Row所占用的水平空间内对齐方式，
（如果mainAxisSize值为MainAxisSize.min，则此属性无意义，因为子widgets的宽度等于Row的宽度。
只有当mainAxisSize的值为MainAxisSize.max时，此属性才有意义）
	MainAxisAlignment.center：居中
	MainAxisAlignment.start：沿初始方向对齐（初始方向是由textDirection决定）例如，textDirection是从右到左（rtl），
	则右对齐
	MainAxisAlignment.end：与start相反(读者可以这么理解：textDirection是mainAxisAlignment的参考系。)
	MainAxisAlignment.spaceBetween：
	MainAxisAlignment.spaceAround：
	MainAxisAlignment.spaceEvenly:
 - crossAxisAlignment：表示子Widgets在纵轴方向的对齐方式，（参考系是verticalDirection）
	crossAxisAlignment.start：沿初始方向对齐（初始方向是由verticalDirection决定）,例如,verticalDirection是从上到
								下（down）,则代表顶部对齐
	crossAxisAlignment.end：与start相反
	crossAxisAlignment.center：居中
	crossAxisAlignment.stretch：
	crossAxisAlignment.stretch：
 - children ：子Widgets数组。

未完待续