![7c6388e1167c30071d031775167d2dcf.png](https://i-blog.csdnimg.cn/blog_migrate/5fccf2def540a93786362588617be213.jpeg)
PS:长期坚持是一件很难的事。Flutter 是 Google 推出的跨平台 UI 框架,可以快速地在 Android 和 IOS 上构建高质量的应用程序,其主要特点是 Flutter 具有快速开发的能力、富有表现力和灵活的 Ui 以及良好的原生性能,本篇文章主要介绍 Flutter 中的 Flex 布局,如下:
Flex基础
Flex常用设置
Row和Column
Expanded和Flexible
Spacer
Flex基础
Flex 布局方式已经广泛使用在前端、小程序开发之中,如果之前已经学习过 Flex 布局,那么在 Flutter 中也是大同小异的,Flexible Box 示意图如下:![d9dd5b9497bd8423bfb37f807caad9aa.png](https://i-blog.csdnimg.cn/blog_migrate/c70b20b75a570817dfe4146d3c6645a0.jpeg)
微信小程序之Flex容器详解
I/flutter (14749): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (14749): The following assertion was thrown during layout:
I/flutter (14749): A RenderFlex overflowed by 440 pixels on the right.
报错显示如下:
![d70f0062442fbbfb689421584af8235a.png](https://i-blog.csdnimg.cn/blog_migrate/7c8ecc132253a8d83ada01b2a5b16431.png)
Flex常用设置
Flex 常用属性如下:direction
mainAxisAlignment
mainAxisSize
crossAxisAlignment
verticalDirection
textBaseline
1. direction
设置主轴方向,可设置的值为 Axis.horizontal 和 Axis.vertical,交叉轴与主轴方向垂直。2. mainAxisAlignment:
设置子 Widget 沿着主轴方向的排列方式,默认 MainAxisAlignment.start,可设置的方式如下:MainAxisAlignment.start:左对齐,默认值;
MainAxisAlignment.end:右对齐;
MainAxisAlignment.center:居中对齐;
MainAxisAlignment.spaceBetween:两端对齐;
MainAxisAlignment.spaceAround:每个 Widget 两侧的间隔相等,与屏幕边缘的间隔是其他 Widget 之间间隔的一半;
MainAxisAlignment.spaceEvently:平均分布各个 Widget,与屏幕边缘的间隔与其他 Widget 之间的间隔相等.
![9ce3e71192d667c939e85d25f019fa3e.png](https://i-blog.csdnimg.cn/blog_migrate/89820a0aff3aa87c89e8a736b1c20efe.png)
3. mainAxisSize
设置主轴的大小,默认 MainAxisSize.max,可设置的值如下:MainAxisSize.max:主轴的大小是父容器的大小;
MainAxisSize.min:主轴的大小是其子 Widget 大小之和。
![d42f8e9d7bd1fb94f0f0e88eaab26eef.png](https://i-blog.csdnimg.cn/blog_migrate/1a0e9dc4a94d4b54177220ec6d228d7c.png)
4. crossAxisAlignment
设置子 Widget 沿着交叉轴方向的排列方式,默认 CrossAxisAlignment.center,可设置的方式如下:CrossAxisAlignment.start:与交叉轴的起始位置对齐;
CrossAxisAlignment.end:与交叉轴的结束位置对齐;
CrossAxisAlignment.center:居中对齐;
CrossAxisAlignment.stretch:填充整个交叉轴;
CrossAxisAlignment.baseline:按照第一行文字基线对齐。
![4f8ea06a5da6874df3a9499bb2a7bdce.png](https://i-blog.csdnimg.cn/blog_migrate/12bc3278e56515e6f25985b586d98976.png)
5. verticalDirection
设置垂直方向上的子 Widget 的排列顺序,默认为 VerticalDirection.down,设置方式如下:VerticalDirection.down:start 在顶部,end 在底部;
VerticalDirection.up:start 在底部,end 在顶部。
![cf6190a697244622dfec5fba2c539e1d.png](https://i-blog.csdnimg.cn/blog_migrate/1ef9267f7bbd0a57b9966ce511a5cbfc.png)
6. textBaseline
设置文字对齐的基线类型,可设置的值如下:TextBaseline.alphabetic:与字母基线对齐;
TextBaseline.ideographic:与表意字符基线对齐;
// textBaselineclass FlexSamplePage extends StatelessWidget {@override
Widget build(BuildContext context) {return Scaffold(
appBar: AppBar(
title: Text("Flex Sample"),
centerTitle: true,
),
body: Row(
children: [
Expanded(
child: Row(
children: [
Text("躬",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16,),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text("躬",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16, ),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
children: [
Text("躬",style: TextStyle(fontSize: 40, ),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16,),),
],
))
],
),
);
}
}
分别为不设置 textBaseline 属性、设置 TextBaseline.alphabetic 和 TextBaseline.ideographic,对比效果如下:
![0409794662d26bca890845f1e528df24.png](https://i-blog.csdnimg.cn/blog_migrate/b28a7985dc53245b54f2091b437c0cd8.png)
Row和Column
Row 和 Column 都继承 Flex,Row 主轴的方向为水平方向,Column 主轴的方向为竖直方向,即在 Flex 基础上设置了主轴方向 direction,如下:// Row
direction: Axis.horizontal,/// Column
direction: Axis.vertical,
如果确定主轴方向,可以直接使用 Row 或者 Column,使用方式和 Flex 一致。
Expanded和Flexible
Flexible 的 fix 属性默认为 FlexFit.loose,而 Expanded 继承 Flexible,其 fix 属性指定为 FlexFit.tight,两者因为其 fix 属性不用而不同,若将 Flexible 的 fit 属性设置为 FlexFit.tight,则 Flexible 与 Expanded 等效,可设置的 fit 属性如下:tight:强制填充可利用的空间;
loose:不强制填充可利用空间,Widget自身大小。
![02a3e48aee37300ed912437ba7015b5a.png](https://i-blog.csdnimg.cn/blog_migrate/c948dece202570a178bc3ad478ab344a.png)
// Expandedclass ExpandedSamplePage extends StatelessWidget {@override
Widget build(BuildContext context) {return Scaffold(
appBar: AppBar(
title: Text("Row Sample"),
centerTitle: true,
),
body: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
flex: 1,
child: Container(
width: 50,
height: 50,
color: Colors.red,
child: Center(
child: Text("A",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Expanded(
flex: 2,
child: Container(
width: 50, // Row Expanded下width无效
height: 50, // Column Expanded下height无效
color: Colors.green,
child: Center(
child: Text("B",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Container(
width: 50,
height: 50,
color: Colors.yellow,
child: Center(
child: Text("C",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
],
));
}
}
显示效果如下:
![1e9cc183be85145a19218bd8eced23a3.png](https://i-blog.csdnimg.cn/blog_migrate/c617c5e9f1cb40a1f5de3bb64426a988.png)
Spacer
Spacer 用来调节 Widget 之间的间距,会占据所有的剩余空间,因此 MainAxisAlignment 的设置将无效,Spacer 的属性 flex 用于设置剩余空间的分配权重,默认值为 1,表示占据所有剩余空间,如果两个以上 Spacer 则按照 flex 分配剩余空间,代码参考如下:class RowSamplePage1 extends StatelessWidget {@override
Widget build(BuildContext context) {return Scaffold(
appBar: AppBar(
title: Text("Row Sample"),
centerTitle: true,
),
body: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 150),
child: Row(
children: [
Container(
width: 80,
height: 80,
color: Colors.red,
),
Spacer(flex: 1,),
Container(
width: 80,
height: 80,
color: Colors.green,
),
Spacer(flex: 2,),
Container(
width: 80,
height: 80,
color: Colors.yellow,
),
],
),
));
}
}
显示效果如下:
![bc2dccf7aef48fb103b2c5170cc4ba80.png](https://i-blog.csdnimg.cn/blog_migrate/de661c57e2ea6848499443e1d222d0eb.png)
Flutter系列之Navigator使用详解
编译时注解详解及实现ButterKnife
- Wireshark分析验证TCP协议
![26b7b0225038bb82cf1ef09491903d22.png](https://i-blog.csdnimg.cn/blog_migrate/12d1baf357a863b2c81efe871b3249e7.jpeg)