• Flutter 学习笔记 源码地址
• Flutter 学习笔记(零) 搭建 Flutter 环境
• Flutter 学习笔记(一) Text 组件
• Flutter 学习笔记(二) Container 组件

1. Container 组件简介

一个拥有绘制、定位、调整大小的 widget。是一个容器组件，内部可以包含其他的 widget

2. Container 属性

2.1 alignment 属性

容器内的组件在容器内的对齐方式。可选值有：

• Alignment.topLeft、 Alignment.topCenter、 Alignment.topRight

  顶部左对齐，居中，右对齐

• Alignment.centerLeft、 Alignment.center Alignment.centerRight

  中部左对齐，居中，右对齐

• Alignment.bottomLeft、 Alignment.bottomCenter、 Alignment.bottomRight

  底部左对齐，居中，右对齐

2.2 constraints 属性

限制子节点的宽高。属性是一个 BoxConstraints 对象

2.3 color 属性

设置容器的背景色

2.4 decoration

在子节点下方装饰。可以设置边框。设置背景色

当设置边框后,子节点会自动调整位置。

属性是一个 Decoration 对象.

PS:这个属性跟 color 值冲突,必须有一个值为空

2.5 foregroundDecoration

在子节点上方设置装饰,比如边框,背景色。

当设置边框后,子节点不会调整位置,有可能会被边框覆盖。

2.6 padding 与 margin

内边距和外边距,参见 HTML 的盒子模型

属性是一个 EdgeInsetsGeometry 对象

3 Decoration

设置容器组件的装饰.因为这是一个抽象类,不能直接使用,可以使用它的子类 BoxDecoration

3.1 color

设置容器的背景色。所以这个属性与 Container 组件的 color 属性冲突.

3.2 image

设置字体颜设置背景图片

3.3 border

设置边框。属性是一个 Border 对象,可以设置上下左右四个方向的边框的宽度和颜色.

3.4 gradient

填充背景色时使用的渐变方式。有三个取值

• LinearGradient

  线性渐变,设置起始位置和渐变色集合

• RadialGradient

  放射见便,以中心为原点向外发散渐变,可以设置发散的半径

• SweepGradient

  扫描渐变,以水平x轴正向方向为起点,扫描到指定的角度。

  可以设置起始角度,结束角度,中心点。

PS: 角度的单位是弧度,不是度
PS: 这里有个小问题,设置的起始角度有可能不生效!!
参考 GitHub 上的 issues

4 TextDemo 源码

import 'package:flutter/material.dart';
import 'ContainerDemo.dart';
void main() => runApp(ContainerDemo());

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var boxConstraints = BoxConstraints.expand(height: 311,width: 311);
    var background = Paint();
    background.color = Colors.green;
    var edgeInset =EdgeInsets.only(left: 110,right: 100,bottom: 100,top: 200);
    var gradColorList =List<Color>();
    gradColorList.add(Colors.blueAccent);
    gradColorList.add(Colors.orange);
    gradColorList.add(Colors.white);
    gradColorList.add(Colors.white);

    var linear =LinearGradient(
        colors: gradColorList,
        begin: Alignment.bottomRight
    );

    var radial = RadialGradient(
      colors: gradColorList,
      radius: 2,

    );
    var sweep = SweepGradient(
      colors: gradColorList,
      //startAngle:,
      endAngle:7,
      center: Alignment.center
    );

    var decoraion = BoxDecoration(
      color: Colors.pinkAccent,
      border: Border(
        top: BorderSide(width: 50,color: Colors.lightGreen),
        right: BorderSide(width: 20,color: Colors.pink),
        left: BorderSide(width: 30,color: Colors.teal),
        bottom:BorderSide(width: 30,color: Colors.lightGreen),
      ),
      gradient: sweep
      );

    
      return MaterialApp(
        title: 'Container Demo',
        home: Scaffold(
          body: Center(
            child: Container(
              child: Text('hello Container',style: TextStyle(
                fontSize: 22,
                background: background
                )),
              constraints:boxConstraints,
              //color: Colors.blueGrey,
              //在子节点下方绘制,子节点会调整位置
              decoration: decoraion,
              //在子节点上方绘制,子节点不动,可能会被覆盖
              //foregroundDecoration :decoraion,
              padding: edgeInset,
              //margin: edgeInset,
              alignment: Alignment.bottomCenter,
            ),
          ),
        ),
      );
  }
}