Flutter基础—常用控件之容器

Container控件即容器，是一个常用的控件，基础容器的实例：

import 'package:flutter/material.dart';
class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Container(
        width: 128.0,
        height: 128.0,
        decoration: new BoxDecoration(
          color: Colors.lightBlueAccent[100],
        ),
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new ContainerDemo(),
    ),
  );
}

ContainerDemo是一个无状态控件。Center控件使子控件在其内部水平和垂直居中，在上面实例中，Center控件使Container控件在其内部水平和垂直居中。Container控件通过width属性设置宽度为128，通过height属性设置高度为128。又通过decoration属性创建一个BoxDecoration对象，BoxDecoration对象描述如何绘制容器，在上面实例中，BoxDecoration对象通过backgroundColor属性为容器设置背景颜色。

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Container(
        width: 300.0,
        height: 400.0,
        decoration: new BoxDecoration(
          color: const Color(0xfffce5cd),
          border: new Border.all(
            color: const Color(0xff6d9eeb),
            width: 8.0,
          ),
        ),
        child: new Text('容器演示'),
      ),
    );
  }
}

修改ContainerDemo控件的代码，设置border属性给容器添加边框。并创建Border对象，通过color属性为边框添加颜色，通过width属性为边框设置宽度。上面实例中的颜色”0xff“+”6d9eeb“，相当于#6d9eeb。最后还在容器内添加了一个Text控件，即文本控件。