Flutter中的容器组件

Container是一个很方便的组件，相当于Web HTML中的div，它包含了公共的绘制，定位和尺寸组件。

更准确的描述，请参考官方Container Class 文档

容器组件用于包含能够应用样式属性的子组件。

如果Container组件没有子项，它将自动填满屏幕上的给定区域，否则它的尺寸取决于给定子元素的高度和宽度。

注意：在没有任何父组件的情况下，不应直接使用容器组件。您可以将Center组件，Padding组件，Column小组件，Row组件或Scaffold组件用作父级组件。

本文使用的是flutter最新版本，如果不是最新版本，可以使用flutter upgrade升级一下。

让我们从一个空容器开始，设置绿色颜色属性。容器将填满所有屏幕。

import 'package:flutter/material.dart';

void main() => runApp(
  Center(   
    child: Container(     
      color: Colors.green,   
    ), 
  )
);

xxx

添加一个child子组件

import 'package:flutter/material.dart';

void main() => runApp(
  Center(   
    child: Container(     
      color: Colors.green,
      child: Text(
        "Flutter Container",
        textDirection: TextDirection.ltr,
      )  
    ), 
  )
);

xxx

我们可以看到容器只占用了子组件的大小。

颜色属性

您可以使用color属性为容器应用背景色。

您将使用具有以下颜色属性的Color Class或Colors Class：

Colors Class

将颜色类与颜色名称一起使用

Center(
  child: Container(
    color: Colors.green,
  ),
);

也可以设置颜色深浅：

Center(
  child: Container(
    color: Colors.green[400],
  ),
);

或

Center(
  child: Container(
    color: Colors.green.shade400,
  ),
);

Color Class

使用带有完整的8个十六进制数字而不是6个的Color Class。如果仅指定6个数字，则假定前两位数字为零，这表示完全透明。

Color(0xFFFFFF); // 完全透明白色 (不可见)
Color(0xFFFFFFFF); // 完全不透明白色 (可见)

您可以使用.fromARGB(A = Alpha或不透明度，R =红色，G =绿色，B =蓝色)，参数为颜色十进制数字或十六进制

Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
Color.fromARGB(255, 66, 165, 245);

您还可以使用.fromRGBO(R =红色，G =绿色，B =蓝色，O =不透明度)

Color c = const Color.fromRGBO(66, 165, 245, 1.0);

Child属性

提供容器要包含的子组件，容器将包裹该子组件的宽度和高度。

此组件只能有一个孩子。要放置多个子项，child属性应该使用具有children属性的Row，Column或Stack之类的组件。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: Text(
      "Flutter C",
      textDirection: TextDirection.ltr,
    ),
  ),
);

对齐属性

我们使用带有alignment属性的Alignment Class 来对齐子组件。

对齐采用2个参数x 和 y。

Alignment(0.0, 0.0)表示矩形的中心。或者使用 Alignment.center

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: Text(
      "Flutter Container",
      style: TextStyle(
        fontSize: 30.0
      ),
      textDirection: TextDirection.ltr,
    ),
    alignment: Alignment(0.0, 0.0),
  ),
);

xxx

Alignment(-1.0, -1.0) 表示矩形的左上方。

Alignment(1.0, 1.0) 表示矩形的右下角。

Alignment(0.0, 3.0) 表示一个点，该点相对于矩形水平居中，垂直于矩形底部并低于矩形的高度。

下图显示了X和Y的图形

xxx

您还可以在Alignment Class中使用常量名称

Alignment.bottomCenter沿着底边的中心点与Alignment(0.0, 1.0)相同

Alignment.bottomLeft左下角与Alignment(-1.0, 1.0)相同

Alignment.bottomRight右下角与Alignment(1.0, 1.0)相同

Alignment.center在水平和垂直方向上与Alignment(0.0, 0.0)相同的中心点

Alignment.centerLeft沿左边缘的中心点与Alignment(-1.0, 0.0)相同

Alignment.centerRight沿着右边缘的中心点与Alignment(1.0, 0.0)相同

Alignment.topCenter沿着顶部边缘的中心点与Alignment(0.0, -1.0)相同

Alignment.topLeft与Alignment(-1.0, -1.0)相同的左上角

Alignment.topRight与Alignment(1.0, -1.0)相同的右上角

另外，您可以将FractionalOffset类与alignment属性一起使用。

FractionalOffset和Alignment是相同信息的两种不同表示形式：相对于矩形大小的矩形内位置。这两类之间的区别在于它们用来表示位置的坐标系。

FractionalOffset使用的坐标系的原点位于矩形的左上角，而Alignment使用的坐标系的原点位于矩形的中心。

xxx

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: Text(
      "Flutter Container",
      style: TextStyle(
        fontSize: 20.0
      ),
      textDirection: TextDirection.ltr,
    ),
    alignment: FractionalOffset(0.5, 0.5),
  ),
);

您也可以在FractionalOffset类中使用常量名称

FractionalOffset.bottomCenter沿着底边的中心点与FractionalOffset(0.5, 1.0)相同

FractionalOffset.bottomLeft左下角与FractionalOffset(0.0, 1.0)相同

FractionalOffset.bottomRight右下角与FractionalOffset(1.0, 1.0)相同

FractionalOffset.center在水平和垂直方向上与FractionalOffset(0.5, 0.5)相同的中心点

FractionalOffset.centerLeft沿着左边缘的中心点与FractionalOffset(0.0, 0.5)相同

FractionalOffset.centerRight沿着右边缘的中心点与FractionalOffset(1.0, 0.5)相同

FractionalOffset.topCenter沿着顶部边缘的中心点与FractionalOffset(0.5, 0.0)相同

FractionalOffset.topLeft与FractionalOffset(0.0, 0.0)相同的左上角

FractionalOffset.topRight与FractionalOffset(1.0, 0.0)相同的右上角

另外，您可以将AlignmentDirectional Class与alignment属性一起使用。

FractionalOffset中的Size偏移量，用于表示TextDirection.ltr文本中的左侧偏移量和TextDirection.rtl文本中的右侧偏移量，而无需了解当前的文本方向。

xxx

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: Text(
      "Flutter Container",
      style: TextStyle(
        fontSize: 20.0
      ),
      textDirection: TextDirection.ltr,
    ),
    alignment: AlignmentDirectional(0.5, 0.5),
  ),
);

您还可以在AlignmentDirectional类中使用常量名称

AlignmentDirectional.bottomCenter沿着底边的中心点与AlignmentDirectional(0.0, 1.0)相同

AlignmentDirectional.bottomEnd“端”侧的底角与AlignmentDirectional(1.0, 1.0)相同

AlignmentDirectional.bottomStart“开始”侧的底角与AlignmentDirectional(-1.0, 1.0)相同

AlignmentDirectional.center在水平和垂直方向上与AlignmentDirectional(0.0, 0.0)相同的中心点

AlignmentDirectional.centerEnd沿着“端”边缘的中心点与AlignmentDirectional(1.0, 0.0)相同

AlignmentDirectional.centerStart沿着“开始”边缘的中心点与AlignmentDirectional(-1.0, 0.0)相同

AlignmentDirectional.topCenter沿着顶部边缘的中心点与AlignmentDirectional(0.0, -1.0)相同

AlignmentDirectional.topEnd“端”侧的顶角与AlignmentDirectional(1.0, -1.0)相同

AlignmentDirectional.topEnd“开始”侧的顶角与AlignmentDirectional(-1.0, -1.0)相同

Constraints约束属性

约束只是一个属性，用于指定组件可以占用的大小或空间。大多数组件和UI都可以使用简单的BoxConstraint构建。

BoxConstraint仅关心minWidth，maxWidth，minHeight和maxHeight。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      constraints: BoxConstraints(
          maxHeight: 300.0,
          maxWidth: 200.0,
          minWidth: 150.0,
          minHeight: 150.0
      ),
    ),
  ),
);

xxx

如我们之前所知，如果容器组件没有子代，它将自动填充屏幕上的给定区域，并且由于我们具有最大宽度和最大高度，因此容器将仅填充最大宽度和最大高度。

让我们将“文本”组件添加到容器中。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      child: Text(
        "Flutter",
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        textDirection: TextDirection.ltr,
      ),
      constraints: BoxConstraints(
          maxHeight: 300.0,
          maxWidth: 200.0,
          minWidth: 150.0,
          minHeight: 150.0
      ),
    ),
  ),
);

因为容器中有一个孩子，所以它将包裹给定子元素的高度和宽度，并且由于我们具有min-width和min-height，因此它将采用BoxConstraints中给出的大小。

让我们尝试使用长文本。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      child: Text(
        "Flutter 长文本测试 长文本测试 长文本测试 长文本测试 长文本测试 长文本测试 长文本测试 长文本测试长文本测试长文本测试长文本测试",
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        textDirection: TextDirection.ltr,
      ),
      constraints: BoxConstraints(
          maxHeight: 300.0,
          maxWidth: 200.0,
          minWidth: 150.0,
          minHeight: 150.0
      ),
    ),
  ),
);

xxx

我们可以在屏幕截图中看到，容器的内容不能超过最大宽度和最大高度。

如果有孩子，也想将容器扩展到最大，则可以使用BoxConstraints.expand()

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      child: Text(
        "Flutter",
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        textDirection: TextDirection.ltr,
      ),
      constraints: BoxConstraints.expand()
    ),
  ),
);

xxx

我们可以看到，容器没有包裹给定子元素的高度和宽度，它已填充到最大。

您也可以发送宽度和高度作为参数。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      child: Text(
        "Flutter",
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        textDirection: TextDirection.ltr,
      ),
      constraints: BoxConstraints.expand(
        width: 350.0,
        height: 400.0
      )
    ),
  ),
);

xxx

Margin 属性

外边距只是一个属性，指定使用EdgeInsets常量值在容器周围添加空白空间。

EdgeInsets.all()

如果需要在所有方向增加边距

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      margin: EdgeInsets.all(20.0),
    ),
  ),
);

xxx

EdgeInsets.symmetric()

如果您需要添加具有对称垂直和/或水平偏移的边距

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      margin: EdgeInsets.symmetric(vertical: 100.0, horizontal: 50.0),
    ),
  ),
);

xxx

EdgeInsets.fromLTRB()

如果需要从左侧，顶部，右侧和底部的偏移量增加边距。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      margin: EdgeInsets.fromLTRB(20.0, 30.0, 40.0, 50.0),
    ),
  ),
);

xxx

EdgeInsets.only()

如果您需要添加给定方向的边距。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      margin: EdgeInsets.only(
        left: 20.0,
        bottom: 40.0,
        top: 50.0
      ),
    ),
  ),
);

xxx

Padding 属性

内边距只是一个属性，用于指定添加内部空白空间，使用与外边距相同的EdgeInsets常量值。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      margin: EdgeInsets.only(
        left: 20.0,
        bottom: 40.0,
        top: 50.0
      ),
      padding: EdgeInsets.all(40.0),
      child: Text(
        "Flutter",
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        textDirection: TextDirection.ltr,
      ),
      constraints: BoxConstraints.expand()
    ),
  ),
);

xxx

Decoration属性

可以在给定的容器应用背景装饰属性。

该值可以是

BoxDecoration Class
FlutterLogoDecoration Class
ShapeDecoration Class
UnderlineTabIndicator Class

我们稍后将在另一篇文章中讨论上述内容

ForegroundDecoration属性

该装饰属性可以应用于给定容器的前面。

该值可以是

BoxDecoration Class
FlutterLogoDecoration Class
ShapeDecoration Class
UnderlineTabIndicator Class

我们稍后将在另一篇文章中讨论上述内容

Transform属性

放置后在容器上执行转换。

我们使用Matrix Class作为值。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      padding: EdgeInsets.all(40.0),
      child: Text(
        "Flutter",
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        textDirection: TextDirection.ltr,
      ),
      transform: Matrix4.rotationZ(0.5)
    ),
  ),
);

xxx

最后

篇幅有限，希望大家能够有所收获！

EthanQ

发布了202 篇原创文章 · 获赞 11 · 访问量 67万+

他的留言板关注

Flutter中的容器组件

猜你喜欢