Flutter 学习 Container 组件这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

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