Flutter那些事-组件篇

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
            ),
          ),
        ),
      )
    );
  }
}