Flutter 容器组件

Flutter 容器组件

容器（Container）组件包含一个子Widget，自身具备如alignment、padding等基础属性，方便布局过程中摆放child（子组件）。Container组件常用属性如表所示：

提示padding与margin的不同之处在于，padding包含在Container内，而margin则是外部边界。如果设置点击事件，padding区域会响应，而margin区域不会响应。

接下来我们编写一个带有装饰效果的Container容器组件示例，主要是加了一个边框及底色，示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '容器组件示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text('容器组件示例'),
        ),
        body: Center(
          // 添加容器
          child: Container(
                width: 200.0,
                height: 200.0,
                // 添加边框装饰效果
                decoration: BoxDecoration(
                  color: Colors.white,
                  // 设置上下左右四个边框样式
                  border: new Border.all(
                    color: Colors.grey, //边框颜色
                    width: 8.0,           //边框粗细
                  ),
                  borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
                                          // 边框的弧度
                ),
                child: Text(
                  'Flutter',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 28.0),
                ),
              ),
            ),
          ),
        );
      }
  }

上述示例代码视图展现大致如图所示：