Expanded与FractionallySizedBox的选择

来源：12-13 活动入口实现【实战应用】

Ooocean

2019-06-18

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

写回答

2回答

CrazyCodeBoy

2019-06-19

已采纳

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

明白了，谢谢老师！

2019-06-19

共1条回复