Flutter中的容器组件

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.fromAR