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