Flutter 常用组件-1 容器组件

容器组件Container包含一个子widget，自身具备alignment、padding等属性，方便布局过程中摆放child。

1 容器组件常用属性

属性名	类型	说明
key	key	Container唯一标识符，用于查找更新
alignment	AlignmentGeometry	控制child的对齐方式，如果Container或者Container的父节点尺寸大于child的尺寸，该属性设置会起作用，有很多种对齐方式
padding	EdgeInsetsGeometry	Decoration内部的空白区，如果有child，child位于padding内部
color	Color	用来设置Container背景色，如果foregroudDecoration设置的话，可能会覆盖color效果
decoration	Decoration	绘制在child后面的修饰，设置了Decoration的话，就不能设置color属性，否则会报错，此时应该在Decoration中进行颜色的设置
foregroundDecoration	Decoration	绘制在child前面的装饰
width	double	Container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局
height	double	Container的高度，设置为double.infinity可以强制在高度上撑满
constraints	BoxConstraints	添加到child上额外的约束条件
margin	EdgeInsetsGeometry	围绕在Decoration和child之外的空白区域，不属于内容区域
transform	Matrix4	设置Container的变换矩阵，类型为Matrix4
child	Widget	Container中的内容Widget

• padding与margin的不同之处：padding是包含在Content内，而margin是外部边界。设置点击事件的话，padding区域会响应，而margin区域不会响应。

2 容器组件示例：

import 'dart:math';
import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Container demo"),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.only(top: 20.0),
            width: 200.0,
            height: 200.0,
            decoration: BoxDecoration(
              border: Border.all(color: Color(0xffff0000), width: 10.0),
              borderRadius: const BorderRadius.all(const Radius.circular(30.0)),
            ),
            child: Text(
              'Container',
              style: TextStyle(fontSize: 28.0),
            ),
            transform:Matrix4.rotationZ(-pi/9),
          ),
        ),
      ),
    );
  }
}

显示如下图：