Flutter基础：第三节 Container 组件的使用

                                 第三节 Container 组件的使用

 

目录

一、alignment属性

二、 设置容器的宽、高和颜色属性

三、padding属性

四、margin属性

五、decoration属性

---

 

 

Container（容器控件）在Flutter是经常使用的控件之一，其作用是方便我们进行布局，对布局进行统一规划。

 

一、alignment属性

alignment是用来控制容器内子内容的对齐方式，对其方式有：

• bottomCenter:下部居中对齐。
• botomLeft: 下部左对齐。
• bottomRight：下部右对齐。
• center：居中对齐。
• centerLeft：纵向居中，横向居左对齐。
• centerRight：纵向居中，横向居右对齐。
• topLeft：顶部左侧对齐。
• topCenter：顶部居中对齐。
• topRight： 顶部居左对齐。

 

接下来看一下效果。

新建一个Container，并在容器内加入一段文字，然后让文字显示在页面右下角。

 

代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "Hello world",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello world"),
        ),
        body: new Center(
          child: Container(
            child: new Text(
              "Hello World",
              style: new TextStyle(fontSize: 20.0, color: Colors.lightBlue),
            ),
            alignment: AlignmentDirectional.bottomEnd,
          ),
        ),
      ),
    );
  }
}

 

效果图：

 

 

二、 设置容器的宽、高和颜色属性

这里我们进行width 、  height 、  color 属性的配置。设置宽为500.0，高是200.0，颜色为黑色。

代码如下：

 child: Container(
            width: 500.0,
            height: 200.0,
            color: Colors.black,
            child: new Text(
              "Hello World",
              style: new TextStyle(fontSize: 20.0, color: Colors.lightBlue),
            ),
            alignment: AlignmentDirectional.bottomEnd,
          ),

 

效果图：

 

 

三、padding属性

padding：内边距，指的是Container边缘和child内容之间的距离。

我们设置左、上边距为0，右边距为20.0，下边距为50.0，代码如下：

 

   child: Container(
            width: 500.0,
            height: 200.0,
            color: Colors.black,
            child: new Text(
              "Hello World",
              style: new TextStyle(fontSize: 20.0, color: Colors.lightBlue),
            ),
            alignment: AlignmentDirectional.bottomEnd,
            padding: EdgeInsets.fromLTRB(0.0, 0.0, 20.0, 50.0),

          ),

说明：EdgeInsets.fromLTRB(value1,value2,value3,value4) ，value1,value2,value3,value4分别代表左、上、右、下。

如果我们设置的上、下、左、右边距都是相同的，则可以使用

    padding: EdgeInsets.all(20.0),

EdgeInsets.all(double value)来设置，源码如下：

const EdgeInsets.all(double value)
    : left = value,
      top = value,
      right = value,
      bottom = value;

 

四、margin属性

margin：外边距，指的是container和外部元素的距离。 

我们设置左边距为20.0、上边距为20.0，右边距为20.0，下边距为20.0，代码如下：

 child: Container(
            width: 500.0,
            height: 200.0,
            color: Colors.black,
            child: new Text(
              "Hello World",
              style: new TextStyle(fontSize: 20.0, color: Colors.lightBlue),
            ),
            alignment: AlignmentDirectional.bottomEnd,
            padding: EdgeInsets.all(20.0),
            margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
          ),

说明：EdgeInsets.fromLTRB(value1,value2,value3,value4) ，value1,value2,value3,value4分别代表左、上、右、下。

如果我们设置的上、下、左、右边距都是相同的，则可以使用

 padding: EdgeInsets.all(20.0),

五、decoration属性

注：decoration和color不能同时使用，同时使用会发生冲突。

decoration：用来为container设置背景和边框。

实际项目中对效果的要求还是相当高的，有时需要设置渐变背景，不用美工切图，一样可以做出渐变效果。这时候就需要使用BoxDecoration这个类了。

代码如下：

  child: Container(
            width: 500.0,
            height: 200.0,
            decoration: BoxDecoration(
                gradient: LinearGradient(colors: [
              Colors.redAccent,
              Colors.greenAccent,
              Colors.blueAccent
            ])),
            child: new Text(
              "Hello World",
              style: new TextStyle(fontSize: 20.0, color: Colors.white),
            ),
            alignment: AlignmentDirectional.bottomEnd,
            padding: EdgeInsets.all(20.0),
            margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
          ),

效果图：

 

通过decoration的border属性 ，可以为其添加边框。设置一个黑色边框，宽度为2。

代码如下：

  child: Container(
            width: 500.0,
            height: 200.0,
            decoration: BoxDecoration(
                gradient: LinearGradient(colors: [
                  Colors.redAccent,
                  Colors.greenAccent,
                  Colors.blueAccent
                ]),
                border: Border.all(color: Colors.black, width: 2.0)),
            child: new Text(
              "Hello World",
              style: new TextStyle(fontSize: 20.0, color: Colors.white),
            ),
            alignment: AlignmentDirectional.bottomEnd,
            padding: EdgeInsets.all(20.0),
            margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
          ),

效果图：