前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter中的容器组件

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升级一下。

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

代码语言:javascript
复制
import 'package:flutter/material.dart';

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

添加一个child子组件

代码语言:javascript
复制
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

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

代码语言:javascript
复制
Center(
  child: Container(
    color: Colors.green,
  ),
);
代码语言:javascript
复制

也可以设置颜色深浅:

代码语言:javascript
复制
Center(
  child: Container(
    color: Colors.green[400],
  ),
);

代码语言:javascript
复制
Center(
  child: Container(
    color: Colors.green.shade400,
  ),
);
Color Class

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

代码语言:javascript
复制
代码语言:javascript
复制
Color(0xFFFFFF); // 完全透明白色 (不可见)
Color(0xFFFFFFFF); // 完全不透明白色 (可见)

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

代码语言:javascript
复制
Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
Color.fromARGB(255, 66, 165, 245);

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

代码语言:javascript
复制
代码语言:javascript
复制
Color c = const Color.fromRGBO(66, 165, 245, 1.0);
Child属性

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

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

代码语言:javascript
复制
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

代码语言:javascript
复制
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使用的坐标系的原点位于矩形的中心。

代码语言:javascript
复制
代码语言:javascript
复制
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文本中的右侧偏移量,而无需了解当前的文本方向。

代码语言:javascript
复制
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

代码语言:javascript
复制
代码语言:javascript
复制
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
      ),
    ),
  ),
);

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

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

代码语言:javascript
复制
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中给出的大小。

让我们尝试使用长文本。

代码语言:javascript
复制
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()

代码语言:javascript
复制
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()
    ),
  ),
);

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

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

代码语言:javascript
复制
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
      )
    ),
  ),
);
代码语言:javascript
复制
Margin 属性

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

EdgeInsets.all()

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

代码语言:javascript
复制
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()

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

代码语言:javascript
复制
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),
    ),
  ),
);
代码语言:javascript
复制
EdgeInsets.fromLTRB()

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

代码语言:javascript
复制
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()

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

代码语言:javascript
复制
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常量值。

代码语言:javascript
复制
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作为值。

代码语言:javascript
复制
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 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 颜色属性
  • Color Class
  • Child属性
  • 对齐属性
  • Constraints约束属性
  • Margin 属性
  • EdgeInsets.symmetric()
  • EdgeInsets.fromLTRB()
  • EdgeInsets.only()
  • Padding 属性
  • Decoration属性
  • ForegroundDecoration属性
  • Transform属性
  • 最后
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档