Flutter入门（7）：Flutter 组件之 Container 详解

1. Container 介绍

基础属性不做太多介绍，有兴趣的可以去Flutter 中文网 了解一下。

2. 示范代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

container.dart 路径如下
/FMStudyApp/lib/Widgets/BaseWidget/container.dart

3. 基本属性

优雅的编程，我们先单独创建一个 container.dart 文件，用来试用 Container 的属性和效果。

import 'package:flutter/material.dart';

class FMContainerVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Container",
          ),
          backgroundColor: Colors.lightBlue,
        ),
        body: _container(),
      ),
    );
  }

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
    );
  }
}

4. 颜色与大小

直接使用 color 属性改变背景色，使用 width 设置宽度，使用 height 属性设置高度。

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      width: 320,
      height: 200,
      color: Colors.red,
    );
  }

使用 constraints 属性来改变 container 大小

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      color: Colors.red,
    );
  }

使用约束来改变 container 的位置与大小，同时设置了大小和约束并且有冲突时，会优先执行约束。

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      color: Colors.red,
      // 此时优先执行约束，会挤压宽度小于 320
      margin: const EdgeInsets.only(left: 150, top: 100, right: 30),
    );
  }

5. Border 边框设置

不得不赞一下，flutter 的边框真的是自定义起来非常的方便，可以给4个边指定不同的颜色，也可以给4个角不同的圆角。

我们先给这个 container 添加一个边框，使用 decoration 属性，BoxDecoration 中的 border 属性。

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
          color: Colors.red,
          width: 3,
        ),
      ),
    );
  }

注意：decoration 属性和 color 属性不可以同时使用，否则会如下报错。在 decoration 属性里也可以设置背景色，如需要同时使用边框和背景色，可以在这里设置。

Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
'package:flutter/src/widgets/container.dart':
Failed assertion: line 283 pos 15: 'color == null || decoration == null'

我们在来改变一下边框的角度

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
      ),
    );
  }

container border.png

其实这样已经能解决大部分需求了，下边我们在介绍下自定义边框

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         color: Colors.yellow,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(0), 
            topRight: Radius.circular(0), 
            bottomLeft: Radius.circular(30), 
            bottomRight: Radius.circular(30)),
      ),
    );
  }

container border custom.png

下边在自定义不同的边框色

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
        border: Border(
            top: BorderSide(
              width: 3,
              color: Colors.cyan,
            ),
            left: BorderSide(
              width: 3,
              color: Colors.blue,
            ),
            right: BorderSide(
              width: 3,
              color: Colors.black,
            ),
            bottom: BorderSide(
              width: 3,
              color: Colors.orange,
            ),
         ),
       ),
    );
  }

container border colorful.png

注意：使用自定义 border 时，不可以使用 borderRadius 属性，否则会有如下报错

A borderRadius can only be given for a uniform Border.

6. 渐变色背景设置

使用 gradient 属性给 container 设置渐变背景色。

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
        gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
    );
  }

container gradient.png

7. 设置背景图

使用 image 属性设置背景图，其中 centerSlice 可以改变填充大小，可以自行实验效果。

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
         image: DecorationImage(
            image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
          // centerSlice: Rect.largest,
         ),
         gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
    );
  }

container image.png

8. 阴影

使用 boxShadow 属性设置阴影。

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
         boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
         image: DecorationImage(
            image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
          // centerSlice: Rect.largest,
         ),
         gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
    );
  }

container shadow.png

9. 旋转

使用 transform 属性设置旋转，这里不做太多叙述了。

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
         boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
         image: DecorationImage(
            image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
          // centerSlice: Rect.largest,
         ),
         gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
      transform: Matrix4.rotationZ(0.1),
    );
  }

container rotate.png

10. child 子控件

使用 child 属性给 container 添加子控件，使用 padding 属性设置子控件的范围，使用 alignment 来设置子控件的居中属性。

  Container _container() {
    return Container(
      // 在这里尝试 Container 属性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
         boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
         image: DecorationImage(
            image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
          // centerSlice: Rect.largest,
         ),
         gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
      transform: Matrix4.rotationZ(0.1),
      alignment: Alignment.centerLeft,
      padding: const EdgeInsets.all(30),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 30,
          color: Colors.red,
        ),
      ),
    );
  }

padding 属性，你可以理解为 child 距离该 container 4个边框的边界距离，例如 padding: const EdgeInsets.all(30),
就是距离 child 上方距离 container 上方 30，左右下三个方向同理