Container组件

1.Container组件

容器组件，内含许多可以控制组件的参数，非常方便。它主要包括以下参数：

参数名	用途
width、height: Double	设置容器宽高
decoration: Decoration	装饰器
child: Weight	容器的子布局
alignment	配置容器内元素的方位。topCenter：顶部居中对齐topLeft：顶部左对齐topRight：顶部右对齐center：水平垂直居中对齐centerLeft：垂直居中水平居左对齐centerRight：垂直居中水平居右对齐bottomCenter底部居中对齐bottomLeft：底部居左对齐bottomRight：底部居右对齐
transform: Matrix4	变换，可以进行旋转、缩放等等变换。注意变换参数在容器中，不在装饰器中
margin	外边距，可以用EdgeInsets.all()、EdgeInsets.fromLTRB()或者EdgeInsets.only()来配置外边距
padding	内边距

1.1 decoration 装饰器

上面说过，Container中有一个参数是decoration，它的类型是Decoration，但是Decoration是一个抽象类，在Container使用时，可以使用它的子类BoxDecoration来装饰。
BoxDecoration中有以下参数：

参数名	用途
color: Color	容器的背景颜色，可以用Colors来配置
border	容器的边框，可以使用以下代码来配置：Border.all()
borderRadius: BorderRadiusGeometry	边框的圆角，BorderRadiusGeometry是抽象类，应该使用它的子类BorderRadius，如BorderRadius.circular()
boxShadow: List	边框阴影
gradient	背景颜色的渐变，例，线性渐变：LinearGradient，径向渐变：RadialGradient，角度渐变：SweepGradient
image: DecorationImage	背景图片，注意容器的背景图片添加时在装饰器中的

1.2 效果展示

最终，我们在Container中配置了如下内容：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyMaterialApp());
}

class MyMaterialApp extends StatelessWidget {
  const MyMaterialApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AppBar Title')
        ),
        body: const MyBody(),
      ),
    );
  }

}

class MyBody extends StatelessWidget {
  const MyBody({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        width: 200,
        height: 100,
        transform: Matrix4.rotationZ(0.3),
        decoration: BoxDecoration(
          image: const DecorationImage(
            image: AssetImage('images/image.webp')
          ),
          color: Colors.yellow,
          border: Border.all(
            color: Colors.brown,
            width: 2.0
          ),
          borderRadius: BorderRadius.circular(8),
          boxShadow: const [
            BoxShadow(
              color: Colors.green,
              offset: Offset(2.0, 2.0),
              blurRadius: 10.0
            )
          ],
          gradient:  const LinearGradient( 
            colors: [Colors.red, Colors.yellow]
          ),
        ),
        child: const Text(
            'Hello Flutter',
            style: TextStyle(
              color: Colors.black87,
              fontSize: 15.0,
            ),
          ),
      ),
    );
  }
}

效果如下：

以上部分内容总结自课程 https://www.bilibili.com/video/BV1S4411E7LY