一、我们页面布局的时候，用到一种场景：
固定的容器内，设置子组件，但是子组件需要自适应，本身多长就多长，一旦超过父容器时，省略号展示即可
image.png
其中，选项1文案固定，选项2文案不确定字数，需要自适应，超过父容器宽度之后，身省略号展示即可
Flexible实现(推荐)：
Container(
margin: EdgeInsets.only(top: 4),
width: 300,
height: 200,
color: Colors.green,
alignment: Alignment.centerLeft,
child: Container(
color: ColorConfig.FFCCCCCC,
child: Row(mainAxisSize: MainAxisSize.min, children: [
Text('选择项1', style: TextStyle(color: Colors.red)),
SizedBox(width: 4),
Flexible(
child: Text('选择项2',
maxLines: 1, overflow: TextOverflow.ellipsis))
])))
注意:
1、alignment: Alignment.centerLeft
如果父级Container没有设置Alignment，则子组件会默认全铺父级，效果如下：
image.png
2、mainAxisSize: MainAxisSize.min
如果包裹选项1和选项2的Row组件没有设置MainAxisSize.min，则子组件会默认占据整行，而不是实际占用空间，效果如下：
image.png
UnconstrainedBox实现:
Container(
margin: EdgeInsets.only(top: 4),
width: 300,
height: 200,
color: Colors.orange,
alignment: Alignment.centerLeft,
child: UnconstrainedBox(
child: Container(
color: ColorConfig.FFCCCCCC,
padding: EdgeInsets.only(right: 6),
child: Row(children: [
Text('选择项1', style: TextStyle(color: Colors.red)),
SizedBox(width: 4),
Text('选择项2',
maxLines: 1, overflow: TextOverflow.ellipsis)
]))))
注意:
1、因为UnconstrainedBox是不限制子组件的约束，子组件多大，它将被撑的多大，故而想要保证选项2超出区域时，展示省略号，该场景不适用
2、该组件适用于动态适配子组件约束，相当于子组件多大就展示多大，不受父级样式影响
二、IntrinsicHeight的使用
场景：常用于审批节点流程的展示
单节点
image.png
多节点
image.png
IntrinsicHeight会根据子组件的拓展，自动撑开对应的高度，用于节点流程的展示，十分方便，参考代码如下：
// 单个节点实现代码如下，多节点用一个List加载下面单个节点即可
IntrinsicHeight(
child: Row(children: [
Column(children: [
Visibility(visible: index == 0, child: SizedBox(height: 6)),
Visibility(
visible: index != 0,
child: Container(
width: 2.w,
height: 6.w,
color: ColorConfig.FFE5E5E5,
)),
Container(
width: 9.w,
height: 9.w,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4.5.w),
border: Border.all(
color: ColorConfig.FFFF3B30,
width: 1.w,
),
)),
Visibility(
visible: index != length - 1,
child: Expanded(
child: Container(
width: 2.w,
color: ColorConfig.FFE5E5E5,
)))
]),
SizedBox(height: 10),
Expanded(
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Row(children: [
Text(
'审核人',
style: TextStyle(color: ColorConfig.FF666666, fontSize: 14),
),
8.wGap,
HtmText(
'同意',
style: TextStyle(color: ColorConfig.FF52C41A, fontSize: 14),
),
]),
Text('07/18 16:32',
style: TextStyle(color: ColorConfig.FF666666, fontSize: 14))
]),
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
10.hGap,
Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(
'原因:',
style: TextStyle(color: ColorConfig.FF333333, fontSize: 14),
),
8.wGap,
Expanded(
child: Text('测试原因文案备注，天之道，损有余而补不足，是故虚胜实，不足剩有余',
style:
TextStyle(color: ColorConfig.FF666666, fontSize: 14)))
]),
]),
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
10.hGap,
Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
HtmText(
'备注:',
style: TextStyle(color: ColorConfig.FF333333, fontSize: 14),
),
8.wGap,
Expanded(
child: HtmText(
'测试原因文案备注，天之道，损有余而补不足，是故虚胜实，不足剩有余',
style: TextStyle(color: ColorConfig.FF666666, fontSize: 14),
))
])
]),
SizedBox(height: 20)
]))
