Flutter 的基础组件的常见属性用例

以下属性皆未完整，完整属性请参考文章《Flutter 组件属性速查》

一.盒子模型

用例一：Container()

alignment – 子组件对齐方式（Alignment）。
padding – 内边距（EdgeInsets）。
color – 背景色（与decoration 互斥）。
decoration – 装饰（Decoration，例如 BoxDecoration，可设置 color、borderRadius、border 等）。
width – 宽度（double）。
height – 高度（double）。
margin – 外边距（EdgeInsets）。
transform – 变换矩阵（Matrix4）。

关键代码

          Container(
              transform: Matrix4.rotationZ(0.05),
              alignment: Alignment.center,
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(20),
                border: Border.all(width: 3, color: Colors.yellow),
              ),
              child: Text(
                "hell0! flutter",
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            ),

完整代码

// 导入Flutter Material Design组件库
import 'package:flutter/material.dart';

// 应用程序入口函数
void main() {
  // 运行应用程序，传入根组件
  runApp(
    // MaterialApp组件，作为应用程序的根组件
    MaterialApp(
      title: "盒子模型", // 应用程序标题
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.deepPurple,
      ), // 应用主题，设置scaffold背景色为深紫色
      home: Scaffold(
        // 顶部应用栏
        appBar: AppBar(title: Center(child: Text("盒子模型"))), // 应用栏标题，居中显示
        // 主体内容区域
        body: Container(
          // 子组件为Center，用于居中显示内容
          child: Center(
            // 子组件为Container，作为主要的盒子模型
            child: Container(
              transform: Matrix4.rotationZ(0.05), // 对容器进行旋转变换，旋转角度为0.05弧度
              alignment: Alignment.center, // 容器内内容对齐方式为居中
              height: 200, // 容器高度为200像素
              width: 200, // 容器宽度为200像素
              // 容器装饰
              decoration: BoxDecoration(
                color: Colors.blue, // 背景颜色为蓝色
                borderRadius: BorderRadius.circular(20), // 圆角半径为20像素
                border: Border.all(
                  width: 3,
                  color: Colors.yellow,
                ), // 边框宽度为3像素，颜色为黄色
              ),
              // 容器内的文本
              child: Text(
                "hell0! flutter", // 文本内容
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ), // 文本样式：字体大小20，颜色白色
              ),
            ),
          ),
        ),
        // 底部导航栏
        bottomNavigationBar: Container(
          height: 80, // 底部导航栏高度为80像素
          child: Center(
            child: Text("bottomNavigationBar底部组件"),
          ), // 底部导航栏内容，居中显示文本
        ),
      ),
    ),
  );
}

二.布局组件

Center() 居中

关键语法

Center(
   child:组件,
)

用例二.Padding()

padding – 内边距（EdgeInsets）。
child – 子组件（Widget）。

关键代码

         Padding(
            // padding: EdgeInsetsGeometry.all(50),//4个方向
            // padding: EdgeInsetsGeometry.only(bottom: 50),//设置一个方向
            padding: EdgeInsetsGeometry.symmetric(
              horizontal: 30, // 水平方向内边距30像素
              vertical: 50, // 垂直方向内边距50像素
            ), // 对称内边距
            child: Container(color: Colors.teal), // 子容器，背景颜色为青绿色
          ),

完整代码

// 导入Flutter Material Design组件库
import 'package:flutter/material.dart';

// 应用程序入口函数
void main() {
  // 运行应用程序，传入根组件
  runApp(
    // MaterialApp组件，作为应用程序的根组件
    MaterialApp(
      title: "内边距", // 应用程序标题
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.deepPurple,
      ), // 应用主题，设置scaffold背景色为深紫色
      home: Scaffold(
        // 顶部应用栏
        appBar: AppBar(title: Center(child: Text("内边距"))), // 应用栏标题，居中显示
        // 主体内容区域
        body: Container(
          color: Colors.green, // 容器背景颜色为绿色
          child: Padding(
            // padding: EdgeInsetsGeometry.all(50),//4个方向
            // padding: EdgeInsetsGeometry.only(bottom: 50),//设置一个方向
            padding: EdgeInsetsGeometry.symmetric(
              horizontal: 30, // 水平方向内边距30像素
              vertical: 50, // 垂直方向内边距50像素
            ), // 对称内边距
            child: Container(color: Colors.teal), // 子容器，背景颜色为青绿色
          ),
        ),
      ),
    ),
  );
}

用例.align()布局

alignment – 对齐方式（Alignment, 如 Alignment.topRight）。
widthFactor – 宽度因子（double，相对于子组件的多少倍）。
heightFactor – 高度因子（double，相对于子组件的多少倍）。
child – 子组件（Widget）。

关键代码

         Align(
            alignment: Alignment.topCenter, // 对齐方式为顶部居中
            // widthFactor: 5, // 宽度因子，注释状态
            // heightFactor: 5, // 高度因子，注释状态
            child: Icon(
              Icons.star,
              size: 150,
              color: Colors.blue,
            ), // 子组件为星星图标，大小150，颜色蓝色
          )

完整代码

// 导入Flutter Material Design组件库
import 'package:flutter/material.dart';

// 应用程序入口函数
void main() {
  // 运行应用程序，传入根组件
  runApp(
    // MaterialApp组件，作为应用程序的根组件
    MaterialApp(
      title: "align布局", // 应用程序标题
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.deepPurple,
      ), // 应用主题，设置scaffold背景色为深紫色
      home: Scaffold(
        // 顶部应用栏
        appBar: AppBar(title: Center(child: Text("align布局"))), // 应用栏标题，居中显示
        // 主体内容区域
        body: Container(
          color: Colors.amber, // 容器背景颜色为琥珀色
          child: Align(
            alignment: Alignment.topCenter, // 对齐方式为顶部居中
            // widthFactor: 5, // 宽度因子，注释状态
            // heightFactor: 5, // 高度因子，注释状态
            child: Icon(
              Icons.star,
              size: 150,
              color: Colors.blue,
            ), // 子组件为星星图标，大小150，颜色蓝色
          ),
        ),
        // 底部导航栏
        bottomNavigationBar: Container(
          height: 80, // 底部导航栏高度为80像素
          child: Center(child: Text("bottomNavigationBar")), // 底部导航栏内容，居中显示文本
        ),
      ),
    ),
  );
}

用例，Column竖向布局，不支持滚动

children – 子组件列表（List）。
mainAxisAlignment – 主轴对齐（MainAxisAlignment，例如 center）。
crossAxisAlignment – 交叉轴对齐（CrossAxisAlignment，例如 start）。
mainAxisSize – 主轴尺寸（MainAxisSize，min 或 max）。

关键代码

        Column(
            mainAxisAlignment: MainAxisAlignment.center, // 主轴对齐方式为居中
            crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴对齐方式为居中
            children: [
              // 第一个子容器
              Container(
                margin: EdgeInsets.only(bottom: 20), // 底部外边距20像素
                height: 200, // 高度200像素
                width: 200, // 宽度200像素
                color: Colors.amber, // 背景颜色为琥珀色
              ),
              // 第二个子容器
              Container(
                margin: EdgeInsets.only(bottom: 20), // 底部外边距20像素
                height: 200, // 高度200像素
                width: 200, // 宽度200像素
                color: Colors.amber, // 背景颜色为琥珀色
              ),
              // 第三个子容器
              Container(
                height: 200,
                width: 200,
                color: Colors.amber,
              ), // 高度200像素，宽度200像素，背景颜色为琥珀色
            ],
          ),

完整代码

// 导入Flutter Material Design组件库
import 'package:flutter/material.dart';

// 应用程序入口函数
void main() {
  // 运行应用程序，传入根组件
  runApp(
    // MaterialApp组件，作为应用程序的根组件
    MaterialApp(
      title: "竖向布局，不支持滚动", // 应用程序标题
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.deepPurple,
      ), // 应用主题，设置scaffold背景色为深紫色
      home: Scaffold(
        // 顶部应用栏
        appBar: AppBar(title: Center(child: Text("竖向布局，不支持滚动"))), // 应用栏标题，居中显示
        // 主体内容区域
        body: Container(
          color: Colors.blueAccent, // 容器背景颜色为蓝色强调色
          height: double.infinity, // 容器高度为无限大
          width: double.infinity, // 容器宽度为无限大
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // 主轴对齐方式为居中
            crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴对齐方式为居中
            children: [
              // 第一个子容器
              Container(
                margin: EdgeInsets.only(bottom: 20), // 底部外边距20像素
                height: 200, // 高度200像素
                width: 200, // 宽度200像素
                color: Colors.amber, // 背景颜色为琥珀色
              ),
              // 第二个子容器
              Container(
                margin: EdgeInsets.only(bottom: 20), // 底部外边距20像素
                height: 200, // 高度200像素
                width: 200, // 宽度200像素
                color: Colors.amber, // 背景颜色为琥珀色
              ),
              // 第三个子容器
              Container(
                height: 200,
                width: 200,
                color: Colors.amber,
              ), // 高度200像素，宽度200像素，背景颜色为琥珀色
            ],
          ),
        ),
      ),
    ),
  );
}

不可滚动性

用例，Row()横向布局,不支持滚动

children – 子组件列表（List）。
mainAxisAlignment – 主轴对齐（MainAxisAlignment，例如 spaceBetween）。
crossAxisAlignment – 交叉轴对齐（CrossAxisAlignment）。
mainAxisSize – 主轴尺寸（MainAxisSize）。

关键代码

       Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround, // 主轴对齐方式为均匀分布
            crossAxisAlignment: CrossAxisAlignment.start, // 交叉轴对齐方式为顶部对齐
            children: [
              // 第一个子容器
              Container(
                height: 200,
                width: 200,
                color: Colors.amber,
              ), // 高度200像素，宽度200像素，背景颜色为琥珀色
              // 第二个子容器
              Container(
                height: 200,
                width: 200,
                color: Colors.amber,
              ), // 高度200像素，宽度200像素，背景颜色为琥珀色
              // 第三个子容器
              Container(
                height: 200,
                width: 200,
                color: Colors.amber,
              ), // 高度200像素，宽度200像素，背景颜色为琥珀色
            ],
          ),

完整代码

// 导入Flutter Material Design组件库
import 'package:flutter/material.dart';

// 应用程序入口函数
void main() {
  // 运行应用程序，传入根组件
  runApp(
    // MaterialApp组件，作为应用程序的根组件
    MaterialApp(
      title: "横向布局,不支持滚动", // 应用程序标题
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.deepPurple,
      ), // 应用主题，设置scaffold背景色为深紫色
      home: Scaffold(
        // 顶部应用栏
        appBar: AppBar(title: Center(child: Text("横向布局,不支持滚动"))), // 应用栏标题，居中显示
        // 主体内容区域
        body: Container(
          color: Colors.blueAccent, // 容器背景颜色为蓝色强调色
          height: double.infinity, // 容器高度为无限大
          width: double.infinity, // 容器宽度为无限大
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround, // 主轴对齐方式为均匀分布
            crossAxisAlignment: CrossAxisAlignment.start, // 交叉轴对齐方式为顶部对齐
            children: [
              // 第一个子容器
              Container(
                height: 200,
                width: 200,
                color: Colors.amber,
              ), // 高度200像素，宽度200像素，背景颜色为琥珀色
              // 第二个子容器
              Container(
                height: 200,
                width: 200,
                color: Colors.amber,
              ), // 高度200像素，宽度200像素，背景颜色为琥珀色
              // 第三个子容器
              Container(
                height: 200,
                width: 200,
                color: Colors.amber,
              ), // 高度200像素，宽度200像素，背景颜色为琥珀色
            ],
          ),
        ),
      ),
    ),
  );
}

用例，flex()和Expanded()弹性布局,不支持滚动

flex
direction -设置主轴方向
children-列表子组件

flex-子（Expanded）
flex -占比（份）
child – 子组件

关键代码

       Flex(
            direction: Axis.vertical, // 主轴方向为垂直
            children: [
              // 顶部容器
              Container(height: 100, color: Colors.amber), // 高度100像素，背景颜色为琥珀色
              // 中间弹性容器
              Expanded(
                child: Container(
                  color: Colors.blueGrey, // 背景颜色为蓝灰色
                  child: Flex(
                    direction: Axis.horizontal, // 主轴方向为水平
                    children: [
                      // 左侧子容器，占2份
                      Expanded(
                        flex: 2, // 弹性系数为2
                        child: Container(
                          height: 200, // 高度200像素
                          color: Colors.deepOrangeAccent, // 背景颜色为深橙色强调色
                          width: 200, // 宽度200像素
                        ),
                      ),
                      // 右侧子容器，占1份
                      Expanded(
                        flex: 1, // 弹性系数为1
                        child: Container(
                          height: 200, // 高度200像素
                          color: Colors.green, // 背景颜色为绿色
                          width: 200, // 宽度200像素
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              // 底部容器
              Container(height: 100, color: Colors.amber), // 高度100像素，背景颜色为琥珀色
            ],
          ),

完整代码

// 导入Flutter Material Design组件库
import 'package:flutter/material.dart';

// 应用程序入口函数
void main() {
  // 运行应用程序，传入根组件
  runApp(
    // MaterialApp组件，作为应用程序的根组件
    MaterialApp(
      title: "弹性布局,不支持滚动", // 应用程序标题
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.deepPurple,
      ), // 应用主题，设置scaffold背景色为深紫色
      home: Scaffold(
        // 顶部应用栏
        appBar: AppBar(title: Center(child: Text("弹性布局,不支持滚动"))), // 应用栏标题，居中显示
        // 主体内容区域
        body: Container(
          color: Colors.blueAccent, // 容器背景颜色为蓝色强调色
          height: double.infinity, // 容器高度为无限大
          width: double.infinity, // 容器宽度为无限大
          child: Flex(
            direction: Axis.vertical, // 主轴方向为垂直
            children: [
              // 顶部容器
              Container(height: 100, color: Colors.amber), // 高度100像素，背景颜色为琥珀色
              // 中间弹性容器
              Expanded(
                child: Container(
                  color: Colors.blueGrey, // 背景颜色为蓝灰色
                  child: Flex(
                    direction: Axis.horizontal, // 主轴方向为水平
                    children: [
                      // 左侧子容器，占2份
                      Expanded(
                        flex: 2, // 弹性系数为2
                        child: Container(
                          height: 200, // 高度200像素
                          color: Colors.deepOrangeAccent, // 背景颜色为深橙色强调色
                          width: 200, // 宽度200像素
                        ),
                      ),
                      // 右侧子容器，占1份
                      Expanded(
                        flex: 1, // 弹性系数为1
                        child: Container(
                          height: 200, // 高度200像素
                          color: Colors.green, // 背景颜色为绿色
                          width: 200, // 宽度200像素
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              // 底部容器
              Container(height: 100, color: Colors.amber), // 高度100像素，背景颜色为琥珀色
            ],
          ),
        ),
      ),
    ),
  );
}

用例，wrap流式布局，不支持滚动

direction – 方向（Axis.horizontal/vertical）。
alignment – 对齐（WrapAlignment）。
spacing – 子项间水平间距（double）。
runSpacing – 行间距（double）。
runAlignment – 行对齐（WrapAlignment）。
crossAxisAlignment – 交叉轴对齐（WrapCrossAlignment）。

关键代码

      Wrap(
            alignment: WrapAlignment.center, // 对齐方式为居中
            direction: Axis.horizontal, // 主轴方向为水平
            children: getList(), // 子组件列表
            runSpacing: 10, // 行间距10像素
            spacing: 10, // 子组件间距10像素
          ),

完整代码

// 导入Flutter Material Design组件库
import 'package:flutter/material.dart';

// 应用程序入口函数
void main() {
  // 运行应用程序，传入根组件
  runApp(wrapWidget());
}

// 流式布局Widget，继承自StatelessWidget
class wrapWidget extends StatelessWidget {
  const wrapWidget({Key? key}) : super(key: key);

  // 生成列表的方法
  List<Widget> getList() {
    // 生成10个容器组件
    return List.generate(10, (index) {
      // 返回一个蓝色的容器，高度和宽度都是200像素
      return Container(height: 200, width: 200, color: Colors.blue);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "wrap流式布局", // 应用程序标题
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.deepPurple,
      ), // 应用主题，设置scaffold背景色为深紫色
      home: Scaffold(
        // 顶部应用栏
        appBar: AppBar(title: Center(child: Text("wrap流式布局"))), // 应用栏标题，居中显示
        // 主体内容区域
        body: Container(
          color: const Color.fromARGB(255, 52, 126, 255), // 容器背景颜色为蓝色
          height: double.infinity, // 容器高度为无限大
          width: double.infinity, // 容器宽度为无限大
          child: Wrap(
            alignment: WrapAlignment.center, // 对齐方式为居中
            direction: Axis.horizontal, // 主轴方向为水平
            children: getList(), // 子组件列表
            runSpacing: 10, // 行间距10像素
            spacing: 10, // 子组件间距10像素
          ),
        ),
      ),
    );
  }
}

用例，Stack,Positioned 堆叠布局

Stack（）

key – Widget 的 key（Key）。
alignment – 对齐方式（Alignment）。
textDirection – 文本方向（TextDirection）。
fit – 适配方式（StackFit）。
clipBehavior – 裁剪行为（Clip）。
children – 子组件列表（List）。

Positioned （）

key – Widget 的 key（Key）。
left – 距父容器左边距离（double）。
top – 距父容器顶部距离（double）。
right – 距父容器右边距离（double）。
bottom – 距父容器底部距离（double）。
width – 固定宽度（double）。
height – 固定高度（double）。

关键代码

      Stack(
            alignment: AlignmentGeometry.center, // 对齐方式为居中
            children: [
              // 第一层容器（最底层）
              Container(
                height: 300,
                width: 300,
                color: Colors.amberAccent,
              ), // 高度300像素，宽度300像素，背景颜色为琥珀色强调色
              // 第二层容器
              Container(
                height: 200, // 高度200像素
                width: 200, // 宽度200像素
                color: const Color.fromARGB(255, 66, 241, 171), // 背景颜色为青绿色
              ),
              // 第三层容器
              Container(
                height: 100, // 高度100像素
                width: 100, // 宽度100像素
                color: const Color.fromARGB(255, 44, 117, 219), // 背景颜色为蓝色
              ),
              // 右下角定位容器
              Positioned(
                right: 20, // 距离右侧20像素
                bottom: 20, // 距离底部20像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 193, 58), // 背景颜色为黄色
                ),
              ),
              // 左下角定位容器
              Positioned(
                left: 20, // 距离左侧20像素
                bottom: 20, // 距离底部20像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 193, 58), // 背景颜色为黄色
                ),
              ),
              // 右上角定位容器
              Positioned(
                right: 20, // 距离右侧20像素
                top: 20, // 距离顶部20像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 193, 58), // 背景颜色为黄色
                ),
              ),
              // 左上角定位容器
              Positioned(
                left: 20, // 距离左侧20像素
                top: 20, // 距离顶部20像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 193, 58), // 背景颜色为黄色
                ),
              ),
              // 底部居中定位容器
              Positioned(
                bottom: 100, // 距离底部100像素
                right: 0, // 距离右侧0像素
                left: 0, // 距离左侧0像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 238, 200), // 背景颜色为浅黄色
                ),
              ),
            ],
          ),

完整代码

// 导入Flutter Material Design组件库
import 'package:flutter/material.dart';

// 应用程序入口函数
void main() {
  // 运行应用程序，传入根组件
  runApp(
    // MaterialApp组件，作为应用程序的根组件
    MaterialApp(
      title: "Stack,Positioned", // 应用程序标题
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.deepPurple,
      ), // 应用主题，设置scaffold背景色为深紫色
      home: Scaffold(
        // 顶部应用栏
        appBar: AppBar(
          title: Center(child: Text("Stack,Positioned")),
        ), // 应用栏标题，居中显示
        // 主体内容区域
        body: Container(
          color: Colors.blueAccent, // 容器背景颜色为蓝色强调色
          height: double.infinity, // 容器高度为无限大
          width: double.infinity, // 容器宽度为无限大
          child: Stack(
            alignment: AlignmentGeometry.center, // 对齐方式为居中
            children: [
              // 第一层容器（最底层）
              Container(
                height: 300,
                width: 300,
                color: Colors.amberAccent,
              ), // 高度300像素，宽度300像素，背景颜色为琥珀色强调色
              // 第二层容器
              Container(
                height: 200, // 高度200像素
                width: 200, // 宽度200像素
                color: const Color.fromARGB(255, 66, 241, 171), // 背景颜色为青绿色
              ),
              // 第三层容器
              Container(
                height: 100, // 高度100像素
                width: 100, // 宽度100像素
                color: const Color.fromARGB(255, 44, 117, 219), // 背景颜色为蓝色
              ),
              // 右下角定位容器
              Positioned(
                right: 20, // 距离右侧20像素
                bottom: 20, // 距离底部20像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 193, 58), // 背景颜色为黄色
                ),
              ),
              // 左下角定位容器
              Positioned(
                left: 20, // 距离左侧20像素
                bottom: 20, // 距离底部20像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 193, 58), // 背景颜色为黄色
                ),
              ),
              // 右上角定位容器
              Positioned(
                right: 20, // 距离右侧20像素
                top: 20, // 距离顶部20像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 193, 58), // 背景颜色为黄色
                ),
              ),
              // 左上角定位容器
              Positioned(
                left: 20, // 距离左侧20像素
                top: 20, // 距离顶部20像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 193, 58), // 背景颜色为黄色
                ),
              ),
              // 底部居中定位容器
              Positioned(
                bottom: 100, // 距离底部100像素
                right: 0, // 距离右侧0像素
                left: 0, // 距离左侧0像素
                child: Container(
                  height: 100, // 高度100像素
                  width: 100, // 宽度100像素
                  color: const Color.fromARGB(255, 255, 238, 200), // 背景颜色为浅黄色
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}