当前位置:   article > 正文

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

flutter container 不继承父级样式

Flutter 开发中,很多应用场景中都会存在父级宽度不固定的情况,子集多种混合元素块的情况

情况1

一般在如果子集不存在多个复杂元素块不确定的宽和高, Expanded 就能解决

  1. Row(
  2. children: <Widget>[
  3. //自动填充
  4. Expanded(
  5. child:Container()
  6. ),
  7. //固定宽度
  8. Text(
  9. "23333",
  10. style: TextStyleConstantReportForm().reportFormTitle1,
  11. ),
  12. ]).

情况2

父级宽度不固定,子集多种元素,包含填充宽度,固定宽度。 LayoutBuilder标签

  1. Row(
  2. //宽度不固定元素
  3. Expanded(
  4. child:LayoutBuilder(
  5. builder: (context, viewport) {
  6. //关键一步
  7. var maxWidth = viewport.maxWidth - 30;
  8. return Row(
  9. children: <Widget>[
  10. Stack(
  11. children: <Widget>[
  12. Container(
  13. margin: EdgeInsets.only(
  14. left: ScreenUtil.instance.setWidth(14),
  15. ),
  16. constraints: BoxConstraints(maxWidth: maxWidth),
  17. child:Padding(
  18. padding:EdgeInsets.only(
  19. top: ScreenUtil.instance.setHeight(14),
  20. bottom: ScreenUtil.instance.setHeight(14),
  21. right:ScreenUtil.instance.setWidth(32),
  22. ),
  23. child: Text(
  24. "${233333}",
  25. style: _TextStyle2,
  26. // maxLines: 1,
  27. // overflow: TextOverflow.ellipsis,
  28. ),
  29. ),
  30. ),
  31. ),
  32. //固定宽度
  33. Text(
  34. "23333",
  35. style: TextStyleConstantReportForm().reportFormTitle1,
  36. ),
  37. ],
  38. ),
  39. ],
  40. );
  41. }
  42. ),
  43. ),
  44. //固定宽度
  45. Text(
  46. "23333",
  47. style: TextStyleConstantReportForm().reportFormTitle1,
  48. ),
  49. ]).

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/227299
推荐阅读
相关标签
  

闽ICP备14008679号