fluter 页面布局 Paddiing Row Column Expanded Flex组件详解

1. Padding 组件

// Padding 组件主要用于给其子组件设置填充（内边距）。
// padding: 设置填充的值
// child: 定义子组件

return Padding(
    padding: EdgeInsets.fromLTRB(0, 0, 10, 0),  // 从左、上、右、下设置填充值，此处右边填充10单位
    child: GridView.count()
);

2. Row 水平布局组件

// Row 组件主要用于水平方向的布局。
// mainAxisAlignment: 定义主轴的排序方式
// crossAxisAlignment: 定义次轴的排序方式
// children: 组件子元素的集合

3. Column 垂直布局组件

// Column 组件主要用于垂直方向的布局。
// mainAxisAlignment: 定义主轴的排序方式
// crossAxisAlignment: 定义次轴的排序方式
// children: 组件子元素的集合

4. Expanded 组件

// Expanded 组件在 Row、Column 和 Flex 布局中类似于 Web 的 Flex 布局。
// flex: 定义元素占据父 Row 或 Column 的比例
// child: 定义子元素

5. Flex 组件

// Flex 组件提供了一种使用 flexible layout model 进行布局的方式。
// direction: 定义 Flex 的方向（水平或垂直）

Flex(
    direction: Axis.horizontal,  // 设置为水平方向
    children: []                 // 子组件集合
);

案例 代码实现

// 这是一个 StatelessWidget 的示例，显示了如何使用 Padding、Row、Expanded 和 Column 组件进行布局。

class HomenCenter extends StatelessWidget {
    Widget build(BuildContext context) {
        return Padding(
            padding: EdgeInsets.all(5),
            child: Column(
                children: <Widget>[
                    Row(
                        children: <Widget>[
                            Expanded(
                                child: Container(
                                    child: Text('你好啊', style: TextStyle(color: Colors.white),),
                                    height: 150,
                                    decoration: BoxDecoration(color: Colors.black),
                                ),
                            )
                        ],
                    ),
                    SizedBox(height: 5,),
                    Container(
                        height: 150,
                        child: Row(
                            children: <Widget>[
                                Expanded(flex: 2, child: Container(decoration: BoxDecoration(color: Colors.yellow))),
                                SizedBox(width: 5,),
                                Expanded(
                                    flex: 1,
                                    child: Column(
                                        children: <Widget>[
                                            Expanded(flex: 1, child: Container(decoration: BoxDecoration(color: Colors.red),)),
                                            SizedBox(height: 5,),
                                            Expanded(flex: 1, child: Container(decoration: BoxDecoration(color: Colors.blue),))
                                        ]
                                    )
                                )
                            ],
                        ),
                    )
                ],
            ),
        );
    }
}