您的位置: 首页  >  文章  >  Flutter开发二 Flutter Widget 之Container

Flutter开发二 Flutter Widget 之Container

分类: 文章 • 2023-11-30 14:04:58

1 前言

Container 是一个比较基础和常用的Widget,在Flutter中主要用作背景，或者padding等。Container的定义如下
**定义：**是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。
可以得出几个信息，它是一个组合的widget，内部有绘制widget、定位widget、尺寸widget。后续看到的不少widget，都是通过一些更基础的widget组合而成的。

2 组成

Container的组成如下：
最里层的是child元素；
child元素首先会被padding包着；
然后添加额外的constraints限制；
最后添加margin。
Flutter开发二 Flutter Widget 之Container
Container的绘制的过程如下：
（1）首先会绘制transform效果；
（2）接着绘制decoration；
（3）然后绘制child；
（4）最后绘制foregroundDecoration。

Container自身尺寸的调节分两种情况：

  • Container在没有子节点（children）的时候，会试图去变得足够大。除非constraints是unbounded限制，在这种情况下，Container会试图去变得足够小。
  • 带子节点的Container，会根据子节点尺寸调节自身尺寸，但是Container构造器中如果包含了width、height以及constraints，则会按照构造器中的参数来进行尺寸的调节。

3 布局行为

由于Container组合了一系列的widget，这些widget都有自己的布局行为，因此Container的布局行为有时候是比较复杂的。
一般情况下，Container会遵循如下顺序去尝试布局：

  • 对齐（alignment）；
  • 调节自身尺寸适合子节点；
  • 采用width、height以及constraints布局；
  • 扩展自身去适应父节点；
  • 调节自身到足够小。

也就是说

  • 如果没有子节点、没有设置width、height以及constraints，并且父节点没有设置unbounded的限制，Container的大小就是0
  • 如果没有子节点、对齐方式（alignment），但是提供了width、height或者constraints，那么Container会根据自身以及父节点的限制，将自身调节到足够小。
  • 如果没有子节点、width、height、constraints以及alignment，但是父节点提供了bounded限制，那么Container会按照父节点的限制，将自身调整到足够大。
  • 如果有alignment，父节点提供了unbounded限制，那么Container将会调节自身尺寸来包住child；
  • 如果有alignment，并且父节点提供了bounded限制，那么Container会将自身调整的足够大（在父节点的范围内），然后将child根据alignment调整位置；
  • 含有child，但是没有width、height、constraints以及alignment，Container会将父节点的constraints传递给child，并且根据child调整自身。

3 属性解析

container的属性也比较多，其中最常用的是以下几个属性
key： Container唯一标识符，用于查找更新。
alignment： 控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。
padding： decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
color： 用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
decoration： 绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。这个属性比较常用，需要终端关注，一般设置圆角，颜色，背景图片等都可以通过这个属性设置
foregroundDecoration： 绘制在child前面的装饰。
width： container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。
height： container的高度，设置为double.infinity可以强制在高度上撑满。
constraints： 添加到child上额外的约束条件。
margin： 围绕在decoration和child之外的空白区域，不属于内容区域。
transform： 设置container的变换矩阵，类型为Matrix4。
child： container中的内容widget。

4 使用示例

下面是官方的一个示例，稍微做了一点修改

 class MyContainer extends StatelessWidget{

      String _image_url = 'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg';
    
      @override
      Widget build(BuildContext context) {
        // 新的Container布局
        return Container(
          constraints: BoxConstraints.expand(
            height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
          ),
          decoration: BoxDecoration(
            //边界
            border: Border.all(width: 2.0, color: Colors.red),
            //边角
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
            //背景
            image: DecorationImage(
                image: NetworkImage(_image_url),
                centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
            ),
            color: Colors.lightGreen
          ),
          //padding
          padding: EdgeInsets.all(8.0),
          //对齐方式
          alignment: Alignment.center,
          //内容
          child: Text("Hello World",
            style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black),
          ),
          //矩阵变换属性
          transform: Matrix4.rotationZ(0.5),
        );
      }
    }

实际效果如下：
Flutter开发二 Flutter Widget 之Container

5 使用场景

Container是经常用到的一个widget，一般说来在以下场景中可以使用Container

  • 需要设置间隔（这种情况下，如果只是单纯的间隔，也可以通过Padding来实现）
  • 需要设置背景色或者背景图片
  • 需要设置圆角或者边框的时候（ClipRRect也可以实现圆角效果）

参考
Flutter 布局（一）- Container详解 https://github.com/yang7229693/flutter-study/blob/master/post/4. Flutter 布局（一）- Container详解.md

相关推荐