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

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。