Flutter 中 Column、Row、Flex 详解一文聊透 | Flutter Widgets

这是我参加更文应战的第10天，活动概况检查： 更文应战

前语

前一篇咱们聊了 Wrap 首要结束根据子项巨细的不同结束主动换行的布局，今日聊的 Row、Col源码编辑器编程猫下载umn、Flex 看姓名就知道是横竖向布源码局。与 Wrap 的差异就在于超过横竖向布局巨细束缚后不能够主动换行，所以这便是咱们之前为什么先聊 Wr源码编辑器编程猫ap 再聊 Rowfluttering、Column、Flex 的原因，让咱们实在知道什么时候该用什么 Widget，flutter是什么意思充分了解他们flutter面试题的源码编辑器编程猫下载中心差异。

Row（横源码编辑器编程猫向-行布局）

这儿和 Wrap 相同咱们只需求传一个 List children ，即可结束填充 Row

Row(
// 构建 3 个 Item
children: List.generate(3, (index) => gfluttershyetItem(index)),flutter菜鸟教程
)

getItem 结束

/// 获取子项目
Widget getItem(int index) {
return Container(
// 宽高设置 60
width: 60,
height: 60,
// 设置布风光
color:fluttered Colors.flutter中文网orange.shade200,
// 设置空位
marginflutter中文网: EdgeInsflutter结构ets.all(2),
// 设置子项居中
alignment: Alignment.center,
// 设置子项
child:flutter怎样读音发音 Text源码编辑器编程猫下载('$index'),源码网站
);
}

看作用

这儿咱们略微做一下装修，方面后边出对比作用

// 添加布景
child: Container(
height: 375,
width: double.maxFinite,
// 设置布景色彩
color: Colors.gre源码编辑器编程猫下载en.shade400,
// 居中
aflutter菜鸟教程lignment: Alignment.centefluttershyr,
// 构建 Row 布局
child: Row(
// 构建 5 个 Item
children: List.generate(3, (index) =&gtflutter是什么意思; getflutter怎样读音发音Item(index)),
),
)

Row 3 个	Row 10 个	Wrap 10 个

这儿忽略对齐办法，只看摆放效flutter是什么意思果，当我源码编辑器编程猫们需求主动换行时运用 Wrap

main源码编辑器AxisSize (主轴巨细)

这儿咱们为了便利咱们翻开fluttershy Dev源码编辑器Too源码本钱ls 中源码买卖网站源码的 Widget Inspector 能够非常便利的为咱们承认 Widget 的巨细、特征、结构等一些fluttered列操作。

• max 则横向填布满
• min 则横向根据子项总巨细填充

MainAxisSize.源码共享网max（默许）	MainAxisSize源码编辑器手机版下载.min

mainAxisAlignment（主轴对齐办法）

MaFlutterinAxisAlignment.start（默许）	MainAxisAlignment.center	MainAxisAlignment.end
MainAxisAlignment.spaceBetween	MainAxisAlignment.spaceAflutteringround	MainAxisAlignment.spaceEvenly

crossAxisAlignment源码之家（次轴对齐办法）

这儿为了看到作用咱们去掉 Container 的 alignment，此刻 Row 是和 Container 是相同大的

CoFlutterntaine源码r(
height: 375,
width: double.maxFinite,
// 设置布景色彩
color: Colors.green.shade400,
// 居中
// alignment: Alignment.center,
// 构建 Row 布局
child: Row(源码编辑器手机版下载
mainflutter面试题AxisSize: MainAxis源码共享网Size.max,//默许
mainAxisAlignment: MainAxisAlignment.start,// 默许
crossAxflutter怎样读音发音isAlignment: CrossAxisAlFlutterignment.center,// 默许
// 构建 3 个 Item
children: List.generate(3, (index) => getItem(index)),源码共享网
),
)

CrossAxisAlignment.start	CrossAxisAlignment.cenflutter结构优缺点ter（默许）	CrossAxisAlignment.end
CrossAxisAlignment.stretch	CrossAxisAlignment.baseline	补白源码网站
		设置 bas源码年代eline 时，有必要协作textBaselin源码e 进行设置。

Column（竖向-列布局）

其实 Column 和 Row 是对应的一个竖向一个横fluttered向，特征必定也是相同的，接下来咱们一起来看一下吧

看flutter结构优缺点作用

Container(
heifluttershyght: 375,
wid源码编辑器手机版下载th: double源码网站.maxFinite,
//源码之家 设置布景色彩
color: Colors.green.shade400,
// 居中
alignmflutter怎样读音发音ent: Alignment.center,
// 构建 Column 布局
child: Column(
// 构建 3 个 Item
children: List.generatflutter结构e(3, (index) => getItem(ind源码编辑器编程猫下载ex)),
),
)

maflutter菜鸟教程inAxisSize (主轴巨细)

这儿咱们依然翻开 Widget Insp源码ector 辅佐检查

• max 则竖向填布满
• min 则竖向根据子项总巨细填充

MainAxisSize.max（默许）	MainAxisSize.min

mainAxisAlignment（主轴对齐办法）

MainAxisAlignment.start（默许）	MainAxisAlignment.center	MainAxis源码编辑器手机版下载Aliflutter面试题gnment.end
MainAxisAlignment.sp源码网站aceBetween	MainAxisAlignment.spaceAround	MainAxisAlignment.space源码本钱Evenly

crossAxisAlignment（次轴对齐办法）

这儿为了看到作用咱们去掉 Co源码买卖网站源码ntainer 的 alignment，此刻 Column 是和 Contain源码年代er 是相flutter结构同大的

Container(
height源码: 37flutter结构优缺点5,
width: double.maxFinite,
//源码买卖网站源码 设置布景色彩
color: Cflutter菜鸟教程olors.green.sFlutterhade400,
// 居中
// alignment: Alignment.center,
// 构建 Column 布局
child: Column(
mainAxisSize: MainAxisSize.源码编辑器手机版下载max,
mainAxisAlignment: MainflutteringAxis源码编辑器编程猫下载Alignment.start,
// 构建 3 个 I源码买卖网站源码tem
ch源码年代ildren: List.generate(3, (index) => getItem(index)),
),
)

CrossAflutter面试题xisAlignment.sta源码编辑器编程猫下载rt	CrossAxisAlignment.center（默许）	CrossAxisAl源码本钱ignment.end
CrossAxisAlignment.stretch	CrossAxisAlignment.baseline	补白
		设置 baseline 时，有必要协作源码年代textBaseline 进行设置。源码编辑器编程猫

Flex（弹性布局）

上面 2 个常用的聊完了，有人可能会flutter是什么意思问为啥要提到 Flex ？这儿咱们就需求看看源码了，跟着我一起来。

Column 源码

到这儿可源码编辑器编程猫以看到 49fluttershy18 行 Column 便是承继自 Flex ，然后 4942 行指定了竖直方向 他便是 Column 了，那么 Row源码网站 会不会也是如此呢？一起看看吧

Row 源码

到这儿咱们能够看到和 Column 相同也是承继自 Flex ，然后指定了方向是横向摆放。

Flex 源码

已然到这了，我flutter结构优缺点们就看看 Flex 的源Flutter码吧，暂时不想看的，直接越过即可，知道了开始的源码，以后了点进去随时看即可。

这儿咱们能够看到 4339 行，Flex 便是承继自 MultiChildRenderObjectWidget ，然后其他一大堆特征咱们基本上面都分析过了。

终究在看看中心代码，经过 createRenderObject 办法创建了一个 RenderFlex 目标返回，然后在 updateR源码买卖网站源码enderOflutteringbject 办法中经过 .. 连级操作，从头对特征赋值。

到这儿就完了，有爱好能够持续深化看看哦源码编辑器编程猫
终究深夜更文不易，如有帮助请点赞支撑哦

源码库房

基于 Flutter 最新版本

• Flutter Widgets 库房

参考链接

• Flutter-Column
• Flutter-Row
• Flutter-Flexfluttershy

重视专栏

• 此文章已收录到下面 的专栏，可Flutter以直接重视
• 更多文章持续阅读｜系列文章持续更新

欢迎点赞➕收藏➕重视，有任何问flutter菜鸟教程题随时在flutter面试题下面评论，我源码编辑器手机版下载会第一时间回复哦