菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
177
0

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

原创
05/13 14:22
阅读数 12350

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

情况1

一般在如果子集不存在多个复杂元素块不确定的宽和高, 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,
          ),
]).

 

发表评论

0/200
177 点赞
0 评论
收藏