Flutter中的容器组件

发布于1/21/2020 来自:「前端知否」微信公众号

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属性的RowColumnStack之类的组件。

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.topLeftAlignment(-1.0, -1.0)相同的左上角

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

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

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

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.topLeftFractionalOffset(0.0, 0.0)相同的左上角

FractionalOffset.topRightFractionalOffset(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仅关心minWidthmaxWidthminHeightmaxHeight

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

最后

篇幅有限,希望大家能够有所收获!