zoukankan      html  css  js  c++  java
  • flutter 父级宽度不固定,子集多个元素自动填充的布局方案方法

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

  • 相关阅读:
    28,intellij idea工程包含scala代码这样打包
    1、调侃程序员
    2 20个常用正则表达式
    27 Java动态加载第三方jar包中的类
    26 查看文件内容有多少行?
    25 读取jar包内log4j.properties文件方法
    MySQL表类型
    Hibernate-检索策略
    Hibernate-Native SQL
    Hibernate-Criteria Queries
  • 原文地址:https://www.cnblogs.com/tianmiaogongzuoshi/p/13736949.html
Copyright © 2011-2022 走看看