Container
Container 是 Flutter 中一个便利的 widget，它本身是一个无状态 widget，其核心作用是将多个基础的绘制、定位和尺寸控制 widget（如 Padding、Align、ColoredBox、ConstrainedBox、DecoratedBox 和 Transform 等）组合在一起 -2-10。
它的布局行为相对复杂，遵循一套特定的规则：默认情况下，有子节点时，它会调整自身大小以适应子节点；无子节点时，它会尽可能撑满父级约束。如果同时指定了宽高，则会严格按照宽高进行渲染 -2-6。你可以把它理解为一个功能全面的基础容器，通过简单属性即可实现背景、边框、边距、对齐和变换等多种效果。
常见属性
| 属性类别 | 关键属性 | 说明 |
|---|---|---|
| 布局定位 | alignment | 控制child组件在容器内的对齐方式 |
| 尺寸控制 | width/height/constrains | 设置容器的宽度和高度/为容器设置更复杂的尺寸约束（最小/最大宽高） |
| 间距 | magin/padding | 按照比例分配剩余空间，实现自适应布局。常与Row和Column配合使用 |
| 装饰 | color | 为容器设置一个简单的背景颜色 |
| 装饰 | decoration | 为容器设置一个复杂的背景装饰 |
| 变换效果 | transform | 对容器机器内容进行矩阵变换 |
| 子组件 | child | 容器内包含的唯一直接子组件 |
代码演示
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
body: Container(
transform: Matrix4.rotationZ(0.05),
margin: EdgeInsets.all(20),
width: 300,
height: 300,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius:BorderRadius.circular(15),
border:Border.all(width: 3,color: Colors.amber)
),
child: Text("测试12",
style: TextStyle(fontSize: 20,color: Colors.white),
),
),
),
);
}
}
Center
Center 是一个用于将其子组件在其自身内部进行水平和垂直居中的布局 widget -3。它的职能非常纯粹，负责处理子组件的对齐方式。在布局行为上，如果其尺寸受到父容器约束并且未设置尺寸因子，它会尽可能占据所有可用空间；如果某个维度不受约束，则该维度尺寸将与子组件尺寸一致 -3。你可以把它看作是实现“居中”这一最常见布局需求的最直接、最语义化的工具 -2-7-8。
代码示例
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Cenrer组件"),
),
body: Center(
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.blue
),
child: Center(
child: Text("居中测试内容",style: TextStyle(fontSize: 15,color:Colors.white)),
),
),
),
),
);
}
}
Align
Align 是一个用于控制子组件在其自身边界内如何对齐的布局组件，通过 alignment 参数即可实现从左上到右下各个角落的精准定位。
| 属性 | 名称 | 说明 |
|---|---|---|
| alignment | 对齐方式 | 子组件在父容器中的对齐方式 |
| widthFactor | 宽度因子 | align子组件的宽度乘以该因子 |
| heightFactor | 高度因子 | align子组件的高度乘以该因子 |
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title: Text("Align数据展示"),
),
body: Container(
color: Colors.red,
child: Align(
widthFactor: 4,
heightFactor: 3,
alignment: Alignment.center,
child: Icon(
Icons.star,
size: 150,
color:Colors.amber
),
),
),
)
);
}
}
Padding
Padding 是一个用于给子Widget添加内边距（留白）的基础布局组件。它会在其子Widget的周围创建空白空间，类似于Web开发中的padding属性。
| 属性 | 类型 | 描述 |
|---|---|---|
padding | EdgeInsetsGeometry | 必需，指定内边距的大小和方向 |
child | Widget | 被包裹的子Widget |
EdgeInsets 使用方式
Padding组件通过EdgeInsets类来定义内边距，有以下常用方式：
// 1. 所有方向相同的边距
padding: EdgeInsets.all(16.0)
// 2. 单独设置水平和垂直
padding: EdgeInsets.symmetric(
horizontal: 16.0, // 左右
vertical: 8.0 // 上下
)
// 3. 单独设置四个方向
padding: EdgeInsets.only(
left: 8.0,
top: 16.0,
right: 8.0,
bottom: 16.0
)
// 4. 使用LTRB（左、上、右、下）
padding: EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 16.0)
代码演示
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Padding组件演示"),
),
body: Container(
decoration: BoxDecoration(
color: Colors.amber,
),
child: Padding(
// 边距一致时
padding: EdgeInsets.all(20),
// 边距不一致
padding: EdgeInsets.only(top:5,right: 10,bottom: 20,left: 30),
// 顶部与底部一致 左边与右边一致时
padding:EdgeInsets.symmetric(vertical: 10,horizontal: 20),
// 使用fromLTRB方法设置
padding:EdgeInsets.fromLTRB(3, 10, 30, 20),
child: Container(
decoration: BoxDecoration(
color: Colors.red
),
),
),
),
),
);
}
}
Cloumn
Column 是一个用于在垂直方向上排列子Widget的多子布局组件。它会将子组件沿着垂直轴（从上到下）依次排列，是Flutter中最常用的布局组件之一。
关键属性
| 属性 | 类型 | 描述 |
|---|---|---|
| mainAxisAlignment | MainAxisAlignment | 主轴的对齐方式 |
| crossAxisAlignment | CrossAxisAlignment | 交叉轴的对齐方式 |
| mainAxisAlignment | MainAxisAlignment | 主轴方向占用的空间大小 |
| children | list<Widget> | 必需，需要排列的子组件列表 |
对齐方式 mainAxisAlignment（主轴对齐）
Column(
mainAxisAlignment: MainAxisAlignment.start, // 顶部对齐（默认）
mainAxisAlignment: MainAxisAlignment.end, // 底部对齐
mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
mainAxisAlignment: MainAxisAlignment.spaceBetween, // 两端对齐，子组件间间距相等
mainAxisAlignment: MainAxisAlignment.spaceAround, // 子组件周围间距相等
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 子组件及两端间距都相等
children: [...],
)
crossAxisAlignment（交叉轴对齐）
Column(
crossAxisAlignment: CrossAxisAlignment.start, // 左对齐
crossAxisAlignment: CrossAxisAlignment.end, // 右对齐
crossAxisAlignment: CrossAxisAlignment.center, // 居中对齐（默认）
crossAxisAlignment: CrossAxisAlignment.stretch, // 拉伸填满宽度
crossAxisAlignment: CrossAxisAlignment.baseline, // 基于文本基线对齐
children: [...],
)
代码示例
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("cloumn代码演示"),
),
body: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.amber
),
child: Column(
// 主轴对齐方式
mainAxisAlignment: MainAxisAlignment.spaceAround,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// mainAxisAlignment:MainAxisAlignment.spaceEvenly,
// mainAxisAlignment:MainAxisAlignment.start,
// mainAxisAlignment:MainAxisAlignment.center,
// mainAxisAlignment:MainAxisAlignment.end,
// 交叉轴对齐方式
// crossAxisAlignment: CrossAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment:CrossAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10)
),
child: Icon(
Icons.access_time_sharp,
size: 90,
),
),
Container(
width: 100,
height: 100,
margin: EdgeInsets.only(top:10),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10)
),
child: Icon(
Icons.abc,
size: 90,
),
),
Container(
width: 100,
height: 100,
margin: EdgeInsets.only(top:10),
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(10)
),
child: Icon(
Icons.add_circle_outline_rounded,
size: 90,
),
)
],
),
),
),
);
}
}
Row
Row 是一个用于在水平方向上排列子Widget的多子布局组件。它会将子组件沿着水平轴（从左到右）依次排列，是Flutter中最常用的布局组件之一。
关键属性
| 属性 | 类型 | 描述 |
|---|---|---|
| mainAxisAlignment | MainAxisAlignment | 主轴的对齐方式 |
| crossAxisAlignment | CrossAxisAlignment | 交叉轴的对齐方式 |
| mainAxisAlignment | MainAxisAlignment | 主轴方向占用的空间大小 |
| children | list<Widget> | 必需，需要排列的子组件列表 |
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Row组件"),
),
body: Container(
width: double.infinity,
height: double.infinity,
child: Row(
// 水平排列
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 200,
height: 200,
color: Colors.amber,
),
SizedBox(
width: 10,
),
Container(
width: 200,
height: 200,
color: Colors.amber,
),
SizedBox(
width: 10,
),
Container(
width: 200,
height: 200,
color: Colors.amber,
),
],
),
),
),
);
}
}
