Flutter - 布局组件-3-Flexible & Expa

Demo

class FlexibleDemo extends StatelessWidget {
  const FlexibleDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(

      /*
      * 在一个横向排布的组件Row中放入两个Flexible组件
      * Flexible 内嵌套了一个child:Container,并且制定宽高,
      * 两个Flexible组件加上一个包裹Text组件的Container,总宽度不占满一行
      * 因为两个Flexible都设置了fit: FlexFit.tight值,
      * 则系统会为Container.Text组件分配完空间后将剩余空间为两个Flexible按比例分配
      * flex:2 , flex:1 , 将剩余空间均分为3等份,
      * 第一个Flexible 占比两份 第二个 Flexible 占比 1分;
      * */

      mainAxisSize: MainAxisSize.max,
      children: [

        Flexible(
          //这个属性会影响到自动分配尺寸
          fit: FlexFit.tight,
          //决定剩余空间的分配比例
          flex: 2,
          child: Container(
            width: 100,
            height: 60,
            color: Colors.red,
            alignment: Alignment.center,
          ),
        ),
        Flexible(
          fit: FlexFit.tight,
          flex: 1,
          child: Container(
            width: 10,
            height: 100,
            color: Colors.orange,
            alignment: Alignment.center,
          ),
        ),
        Container(
          color: Colors.purple,
          child: Text('hello'),
        )
      ],
    );
  }
}

2.Expanded

• Expanded 继承于Flexible ,
• Expanded是默认把属性 fit 设置为:FlexFit.tight且不可修改,
• Expanded的flex属性默认等于1,flex属性可修改.
• 在Row内的所有子组件,全部使用Expanded嵌套的话,就可以解决横向越界的问题.系统会默认把Row的所有子组件挤压在父类宽度范围内;