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

27 篇文章 0 订阅

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

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值