Flutter-弹性布局

Widget—Flex

Flex

• direction(主轴方向)
• mainAxisAlignment（主轴对齐方式）
• crossAxisAlignment（交叉轴对齐方式）
• textDirection（水平方向上的排列顺序）
• verticalDirection（垂直方向上的排列顺序）
• children（子组件）

Expended（可伸缩组件，放在弹性布局组件中）

• flex（声明弹性布局所占比例）
• child（子组件）

代码区

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Flex(
      direction: Axis.horizontal,//主轴方向为水平
      textDirection: TextDirection.rtl,//内容方向从右往左排列，故设置的图标在右，溜冰鞋在左
      crossAxisAlignment: CrossAxisAlignment.start,//交叉轴对齐方式是从起点开始对齐，这里起点就是垂直方向的上边缘吧
      children:  [
        Expanded(
          flex: 2,//这个部分的组件占两份
          child: Container(
            color: Colors.orange,//橘色
            height: 60,
            child: const Icon(Icons.settings,size: 40,),//图标：设置
          ),
        ),
        Expanded(
          flex: 1,//这个部分的组件占一份
          child: Container(
            color: Colors.lightBlue,//亮蓝色
            height: 40,
            child: const Icon(Icons.ice_skating,size: 40,),//图标：溜冰鞋
          ),
        ),
      ],
    );
  }
}