Expanded与FractionallySizedBox的选择

Question

在Widget _item(BuildContext context, CommonModel model){…}方法中，为了使每一个item水平方向大小一样，使用了Expanded，我尝试将之换成FractionallySizedBox，运行报错了，请问老师，Expanded和FractionallySisedBox有什么区别，该如何选择？

Answer 1

CrazyCodeBoy 2019-06-19 20:58:57

• Expanded：等分组件 flex来设置比例,父组件必须是Flex，Row，Column

• FractionallySizedBox：根据现有布局调整child大小，child设置的大小无效

• FractionallySizedBox 在同一方向不允许与其他FractionallySizedBox并列，否则会出现crash

在上述代码中因为_item()是位于Row中的且与多个_item()并列，所以会报错。

FractionallySizedBox

如果你有一个Widget，则可以使用FractionallySizedBox widget指定要填充的可用空间的百分比。在这里，绿色Container设置为填充可用宽度的70％和可用高度的30％。

Widget myWidget() {
 return FractionallySizedBox(
   widthFactor: 0.7,
   heightFactor: 0.3,
   child: Container(
     color: Colors.green,
   ),
 );
}

Expanded

该Expanded 允许widget来填充可用的空间，该空间水平和垂直都可以。你可以使用Expanded 的flex属性将多个widget设置他们的权重。绿色Container占宽度的70％，黄色Container占宽度的30％。

Widget myWidget() {
 return Row(
   children: <Widget>[
     Expanded(
       flex: 7,
       child: Container(
         color: Colors.green,
       ),
     ),
     Expanded(
       flex: 3,
       child: Container(
         color: Colors.yellow,
       ),
     ),
   ],
 );
}

• 提问者 Ooocean #1

  明白了，谢谢老师！

Answer 2

JKill 2022-05-29 17:46:23

FractionallySizedBox的父容器如果是column或者是row 设置某一方向的widthFactor和heightFactor是会报错的。