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

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

 

上一篇:canvas绘制文字


下一篇:Android控件属性有最小宽度minWidth,但没有最大宽度maxWidth,那就自定义View搞定它