Flutter 中的 Flex 小部件：全面指南

在Flutter中，Flex小部件是一个简单的容器，它使用Flex布局模型来排列其子项。Flex布局模型类似于CSS中的Flexbox布局。

以下是一个简单的Flex小部件示例，它包含三个子小部件，并将它们均匀地分布在容器内：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Flex(
            direction: Axis.horizontal, // 水平方向
            children: <Widget>[
              Expanded(
                child: Container(color: Colors.red, height: 50.0),
              ),
              Expanded(
                child: Container(color: Colors.green, height: 50.0),
              ),
              Expanded(
                child: Container(color: Colors.blue, height: 50.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，Flex小部件有direction属性设置为Axis.horizontal，这意味着子小部件将水平排列。每个子小部件都被Expanded小部件包裹，这确保它们会平均分配可用空间。每个Container都有不同的颜色和高度，以便于区分。