【flutter】Container组件

系统管理员 2021-09-24 05:44 449阅读 0赞

Container是flutter中广泛使用的容器类组件，在以下场景会用到Container：

1.  设置宽高：flutter中大部分组件不能设置宽高，需要依赖容器。
2.  添加背景颜色
3.  添加背影图像
4.  添加内外边距：padding和margin
5.  添加边框
6.  设置圆角
7.  设置child对齐：居中、居左、居右、居上、居下或偏移
8.  设置变换：旋转或变形

因此，Container是一个非常基础的组件，同时也是用途广泛的组件，熟悉它非常有必要。

### 布局特点 ###

Container组件的大小取决于

1.  如果设置的宽高不在constraints范围内，设置的宽高会无效；
2.  如果它有child，它会尽可能小。如果不设置宽高和约束，相当于child的大小。如果设置了宽高和约束，以设置最小有效值为准；
3.  如果它没有child，它会尽可能大。如果不设置宽度和约束，相当于parent的大小。如果设置了宽高和约束，以设置的最大有效值为准。

> constraints是一个约束大小的属性，相当于一个size范围，使Container不会小于最小size，不会超过最大size。如果没有设置此属性，就是无限制：最小宽高是0，最大宽高是parent的宽高。

### 构造函数 ###

Container(
    	{ Key key,
    	AlignmentGeometry alignment,
    	EdgeInsetsGeometry padding,
    	Color color,
    	Decoration decoration,
    	Decoration foregroundDecoration,
    	double width,
    	double height,
    	BoxConstraints constraints,
    	EdgeInsetsGeometry margin,
    	Matrix4 transform,
    	Widget child}
    )

### 属性 ###

*  alignment：child对齐的属性，可以设置居中、居左、居右、居上、居下等等。  
    alignment已经在我的另外一篇文章中详细说明：[Flutter Stack组件][Flutter Stack]
 *  padding：内边距。width和height包含padding值。
 *  color：背景颜色。
 *  decoration：设置装饰，比如边框、圆角、背景图片等。不能给Container同时设置decoration和color属性，如果要同时设置，给decoration设置color就可以。
 *  foregroundDecoration，设置前景装饰。
 *  width：宽度。
 *  height：高度。
 *  constraints：大小范围约束，constraints有四个属性：minWidth、minHeight、maxWidth、maxHeight。
 *  margin: 外边距。
 *  transform：变换效果，比如翻转、旋转、变形等。
 *  child：子组件，可以不设置。

#### 示例一：约束、对齐与变换。 ####

Container(
      constraints: BoxConstraints.expand(
        height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
      ),
      padding: const EdgeInsets.all(8.0),
      color: Colors.blue[600],
      alignment: Alignment.center,
      child: Text('Hello World',
        style: Theme.of(context)
            .textTheme
            .display1
            .copyWith(color: Colors.white)),
      transform: Matrix4.rotationZ(0.1),
    )

运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70]

#### 示例二：给Container添加背景图片 ####

import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Container demo")),
            body: new Container(
              constraints: new BoxConstraints.expand(width: 300,height: 300),
              decoration: new BoxDecoration(
                border: new Border.all(width: 2.0, color: Colors.red),
                color: Colors.grey,
                borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
                image: new DecorationImage(
                  image: new AssetImage('graphyics/face.jpg'),
                ),
              ),
              padding: const EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: new Text('Hello Container',style: TextStyle(color: Colors.red),),
            ))));

运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 1]

#### 示例三：不设置宽高和约束，有child，size会尽可能小 ####

import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Container demo")),
            body: Container(
                child: Text("Hello,Container",
                    style: TextStyle(fontSize: 20, color: Colors.white)),
                color: Colors.red))));

运行效果：  
![在这里插入图片描述][20200501162404851.png]

#### 示例四：不设置宽高和约束，没有child，size会尽可能大 ####

import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Container demo")),
            body: Container(
                color: Colors.green))));

运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 2]

#### 示例五：宽高不在约束范围内会无效。 ####

import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Container demo")),
            body: Container(
                constraints: BoxConstraints(
                    minWidth: 200, minHeight: 200, maxWidth: 400, maxHeight: 400),
                width: 20,
                height: 20,
                child: Text("Hello,Container",
                    style: TextStyle(fontSize: 20, color: Colors.white)),
                color: Colors.green))));

运行效果(绝色区域宽高是200)：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 3]

#### 示例六：没有设置宽高但是设置了child，会尽可能小，不会小于child的size。 ####

import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Container demo")),
            body: Container(
                constraints: BoxConstraints(
                    minWidth: 20, minHeight: 20, maxWidth: 400, maxHeight: 400),
                child: Text("Hello,Container",
                    style: TextStyle(fontSize: 20, color: Colors.white)),
                color: Colors.green))));

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 4]

#### 示例七：设置了child和宽高会尽可能小，以有效的最小值为准(minWidth或width) ####

import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Container demo")),
            body: Container(
                constraints: BoxConstraints(
                    minWidth: 10, minHeight: 10, maxWidth: 400, maxHeight: 400),
                width: 100,
                height: 100,
                child: Text("Hello,Container",
                    style: TextStyle(fontSize: 20, color: Colors.white)),
                color: Colors.green))));

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 5]  
图中绿色部分宽是100,高是100。

[Flutter Stack]: https://blog.csdn.net/devnn/article/details/105880070
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70]: /images/20210923/70cb476f1d13462db3ec02c1d1fccd34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 1]: /images/20210923/0e54b51749db45ccb6614e9e88baa29a.png
[20200501162404851.png]: /images/20210923/cf45a0a898704c929bc153f0b491cb99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 2]: /images/20210923/e17637ab52544051a7dff3ef4fa54ee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 3]: /images/20210923/8c03d0d65ba4465caea9ad798b7fb80d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 4]: /images/20210923/a4a3167834614eb58b88e257de32773f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70 5]: /images/20210923/b2cb86513b5145989b375b131a27961b.png