flutter 父级宽度不固定，子集多个元素自动填充的布局方案方

Flutter 开发中，很多应用场景中都会存在父级宽度不固定的情况，子集多种混合元素块的情况

情况1

一般在如果子集不存在多个复杂元素块不确定的宽和高, Expanded 就能解决

Row(
        children: <Widget>[
         //自动填充
          Expanded(
            child:Container()
          ),
          //固定宽度
          Text(
            "23333",
            style: TextStyleConstantReportForm().reportFormTitle1,
          ),
]).

image.gif

情况2

父级宽度不固定，子集多种元素，包含填充宽度，固定宽度。 LayoutBuilder标签

Row(
          //宽度不固定元素
              Expanded(
                              child:LayoutBuilder(
                                builder: (context, viewport) {
                                  //关键一步
                                  var maxWidth = viewport.maxWidth - 30;

                                   return Row(
                                     children: <Widget>[
                                       Stack(
                                         children: <Widget>[
                                           Container(
                                             margin: EdgeInsets.only(
                                               left: ScreenUtil.instance.setWidth(14),
                                             ),
                                             constraints: BoxConstraints(maxWidth: maxWidth),
                                             child:Padding(
                                               padding:EdgeInsets.only(
                                                 top: ScreenUtil.instance.setHeight(14),
                                                 bottom: ScreenUtil.instance.setHeight(14),
                                                 right:ScreenUtil.instance.setWidth(32),
                                               ),
                                               child: Text(
                                                 "${233333}",
                                                 style: _TextStyle2,
//                                                maxLines: 1,
//                                                overflow: TextOverflow.ellipsis,
                                               ),

                                             ),

                                           ),

                                             ),
                                            //固定宽度
                                              Text(
                                                "23333",
                                                style: TextStyleConstantReportForm().reportFormTitle1,
                                                  ),        
                                         ],

                                       ),
                                     ],
                                   );
                                }
                              ),
                          ),   
          //固定宽度
          Text(
            "23333",
            style: TextStyleConstantReportForm().reportFormTitle1,
          ),
]).

image.gif