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

  • 相关阅读:
    Introduction to Computer Science and Programming in Python--MIT
    随机变量及其分布
    条件期望与重期望
    Fourier级数
    Windows进程通信-共享内存空间
    windows网络编程-socket
    PE文件中找导出表
    PE文件结构体-IMAGE_DATA_DIRECTORY
    RVA到FOA的转换
    PE文件结构体-IMAGE_SECTION_HEADER
  • 原文地址:https://www.cnblogs.com/tianmiaogongzuoshi/p/13736949.html
Copyright © 2011-2022 走看看