flutter 父級寬度不固定,子集多個元素自動填充的佈局方案方法

天渺工作室發表於2020-09-26

Flutter 開發中,很多應用場景中都會存在父級寬度不固定的情況,子集多種混合元素塊的情況

情況1

一般在如果子集不存在自動填充100%寬和高, Expanded 就能解決

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

情況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,
          ),
]).

 

相關文章