Flutter 入门  — Container 属性详解

5,428 阅读7分钟

Dart4Flutter - 01 – 变量、类型和函数

Dart4Flutter – 02 –控制流 和异常

Dart4Flutter – 03 – 类和泛型

Dart4Flutter – 04 – 异步和库

Dart4Flutter - 拾遗01 - flutter-dart环境搭建

Dart4Flutter - 不可变性

Flutter入门 - 状态管理

Flutter 入门实例1

Flutter 入门 - Container 属性详解

Flutter 入门-本地访问-MethodChannel

Flutter 实例 - 加载更多的ListView

Flutter 实例 - 从本地到Flutter通信 - Event Channels

new Container(
  constraints: new BoxConstraints.expand(
    height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.teal.shade700,
  alignment: Alignment.center,
  child: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
  foregroundDecoration: new BoxDecoration(
    image: new DecorationImage(
      image: new NetworkImage('https://www.example.com/images/frame.png'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  transform: new Matrix4.rotationZ(0.1),
)

一个好的组件是一个可以配置padding、位置、尺寸的组件.

官方文档链接

而container组件通常用来包裹子组件,而且可以配置一些样式属性。

假如Container组件没有子组件,它会自动填充给定区域,否则他讲占据子组件大小的区域

注意:container组件不应该单独使用,而是应该有个父组件。你可以是用Center组件、Padding组件、Column组件、Row组件或者Scaffold组件充当父组件。

开始

我们从一个空的Container组件开始,给他color属性赋值为绿色:Colors.green.container 组件将充满整个屏幕。

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

现在给container组件添加一个子组件。

Center(
  child: Container(
    color: Colors.green,
    child: Text("Flutter CheatSheet."),
  ),
);

可以看到,container只占据了子组件的大小。

Color 属性

可以通过color设置Container组件的背景颜色。

You will use the Color Class or Colors Class with the color property like below: 可以是用Color或者Colors类给color属性赋值,如下:

Colors 类

use Colors Class with the color name 使用Colors类点颜色的名字赋值。

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

You can add a shade also 也可以添加阴影

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

或者是如下的写法

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

Color 类

使用8个16进制数数而不是6个,加入你使用6个,这样会导致最前面两位假定为0,也具以为这是完全透明的。

Color(0xFFFFFF); // 不可见的
Color(0xFFFFFFFF); //  可见的

你可以使用 .fromARGB (A = Alpha or 透明度, R = Red, G = Green, B = Blue)方法,参数可以是整数或者十六进制的颜色值。

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

可以是用.fromRGBO (R = Red, G = Green, B = Blue, O = Opacity)方法,参数是整数颜色值。

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

Child 属性

给container提供一个子组件,container的大小和子组件相同

container只能有一个子组件。如果想布局多个子组件,可以使用例如Row、Column或者Stack组件,他们有children属性,可以将组件添加到children中。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: new Text("Flutter Cheatsheet"),
  ),
);

Alignment 属性

为了对齐子组件,我们可使用Alignment类给alignment属性赋值。

Alignment 有两个参数x和y

Alignment(0.0, 0.0)代表整个长方形的中心。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: new Text("Flutter Cheatsheet",
      style: TextStyle(
        fontSize: 10.0
      ),
    ),
    alignment: Alignment(0.0, 0.0),
  ),
);

Alignment(-1.0, -1.0) 代表左上角

Alignment(1.0, 1.0)代表右下角

下图显示的是XY坐标系

你也可以是用Alignment的常量

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: new Text("Flutter Cheatsheet",
      style: TextStyle(
        fontSize: 20.0
      ),
    ),
    alignment: FractionalOffset(0.5, 0.5),
  ),
);

你也可以使用FractionalOffset类的常量

FractionalOffset.bottomCenter :表示底边中点,依次类推:

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类

表达和Size相关的偏移量,其中水平方向和书写方向有关。

在TextDirection.ltr中表示距离左边的距离,当TextDirection.rtl中表示距离右边的距离,而且开发这不需要关注书写的方向。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: new Text("Flutter Cheatsheet",
      style: TextStyle(
        fontSize: 20.0
      ),
    ),
    alignment: AlignmentDirectional(0.0, 0.0),
  ),
);

你也可以使用AlignmentDirectional类的常量。

AlignmentDirectional.bottomCenter:底边中点

AlignmentDirectional.bottomEnd:右下角

AlignmentDirectional.bottomStart:左下角

AlignmentDirectional.center:垂直中心点

AlignmentDirectional.centerEnd:右边中点

AlignmentDirectional.centerStart:左边中点

AlignmentDirectional.topCenter:上边中点

AlignmentDirectional.topEnd:右上角

AlignmentDirectional.topEnd : 左上角

以上都说明都在是TextDirection.ltr中,一次类推

Constraints 属性

constraint 属性是指定组件占据空间大小的属性。大多数组件或者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
      ),
    ),
  ),
);

正如之前我们提到的,假如container没有子组件,他将自动填充给定的控件,因为我们给定了max-width 和 max-height,所以只能占据max-width 和 max-height指定的空间。

现在给container添加 Text控件。

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

因为现在container有了子组件,本应该container占据子组件大小的空间,但是因为我们给定了 min-width 和 min-height,所以他只能占据BoxConstraints所指定的空间。

我添加一个更长一些的text。

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

如上图所示,container扩充的空间不能超过max-width 和 the max-height的指定。

即使container有子元素,如果我们需要将container扩展到最大,我们可以使用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"),
      constraints: BoxConstraints.expand(),
    ),
  ),
);

如图所示,container没有包裹子元素,而是扩展到最大。

而且你还可以指定宽高。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      child: Text("Flutter"),
      constraints: BoxConstraints.expand(
        width: 350.0,
        height: 400.0
      ),
    ),
  ),
);

Margin 属性

margin是一个给container周围增加空间的属性,一般通过EdgeInsets的常量。

EdgeInsets.all()

如果需要四周都添加margin。

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

EdgeInsets.symmetric()

如果你只是想在上下或者左右添加margin。

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

EdgeInsets.fromLTRB()

如果需要从左侧,顶部,右侧和底部的偏移量添加margin。

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

EdgeInsets.only()

如果你想通过非零值添加margin。

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

Padding Property

通过和margin一样的EdgeInsets常量值,在container的内部添加空白空间。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      margin: new EdgeInsets.only(
          left: 20.0,
          bottom: 40.0,
          top: 50.0
      ),
      padding: new EdgeInsets.all(40.0),
      color: Colors.green,
      child: Text("Flutter Cheatsheet"),
      constraints: BoxConstraints.expand(),
    ),
  ),
);

Decoration Property

decoration属性作用于子组件之下。

属性的值可以是如下的类:

  • BoxDecoration 类
  • FlutterLogoDecoration 类
  • ShapeDecoration 类
  • UnderlineTabIndicator 类

我们将在其他的文章中讨论上面的类

ForegroundDecoration 属性

decoration 属性作用于子元素之上。

属性的值可以是如下的类:

  • BoxDecoration 类
  • FlutterLogoDecoration 类
  • ShapeDecoration 类
  • UnderlineTabIndicator 类 我们将在其他的文章中讨论上面的类

Transform 属性

在布局时对容器执行转换。 我们使用Matrix Class作为值

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      padding: new EdgeInsets.all(40.0),
      color: Colors.green,
      child: Text("Flutter Cheatsheet"),
      transform: new Matrix4.rotationZ(0.5)
    ),
  ),
);

我们将在其他的文章中讨论Matrix类。

欢迎大家讨论

参考