Flutter中的容器组件

前端知否

发布于 2020-03-23 18:01:41

1.9K0

发布于 2020-03-23 18:01:41

文章被收录于专栏：前端知否

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

添加一个child子组件

import 'package:flutter/material.dart';

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

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

颜色属性

您可以使用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),
  ),
);

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

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

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

下图显示了X和Y的图形

您还可以在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使用的坐标系的原点位于矩形的中心。

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文本中的右侧偏移量，而无需了解当前的文本方向。

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

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

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

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

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

如果有孩子，也想将容器扩展到最大，则可以使用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()
    ),
  ),
);

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

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

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

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

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

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

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

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

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

最后

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-01-30，如有侵权请联系 cloudcommunity@tencent.com 删除

flutter

本文分享自前端知否微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

flutter

登录后参与评论

0 条评论

热度