Flutter 通用组件(Flexible、Unconstrai

一、我们页面布局的时候，用到一种场景：

固定的容器内，设置子组件，但是子组件需要自适应，本身多长就多长，一旦超过父容器时，省略号展示即可

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)
      ]))