（六）容器部件 Container

• 如果需要一块视图，有背景颜色，设置固定尺寸以及边距，圆角边框的设定等，Container 这个Widget值得考虑
• Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。
• Container
  • color 背景颜色
  • child 添加布局 ，例如Row 即横排视图
    • Row
      • children
      • mainAxisAlignment 主轴对齐
        • MainAxisAlignment.center 对齐居中
  • padding
    • EdgeInsets.only(left: 10.0, right:10.0) 分别添加内边距
    • EdgeInsets.all(10.0) 整体内边距添加
  • margin
    • EdgeInsets.all(10.0) 整体外边距添加
  • width 容器宽度
  • height容器宽度
  • decoration 容器的装饰，例如背景颜色 边框 阴影
    • BoxDecoration
      • image 背景图像
        • DecorationImage
          • image:
            • NetworkImage 网络图像
          • alignment
            • Alignment.topCenter 图像放置顶部中间
          • repeat 图像重复模式
            • ImageRepeat.noRepeat
            • ImageRepeat.repeat
            • ImageRepeat.repeatX
            • ImageRepeat.repeatY
          • fit 填充模式
            • BoxFit.cover 图像保持比例 覆盖整个容器
          • colorFilter 设置颜色滤镜
            • ColorFilter.mode 需要设置2个参数
              • 设置颜色 例如 Colors.indigoAccent[400].withOpacity
              • 设置混合模式
                • BlendMode.hardLight,
      • color 背景颜色 与 Container本身 的 color属性只用其中一个即可
      • border 边框
        • Border
          • top
            • BorderSide
              • color
              • width
              • style
                • BorderStyle.solid
          • bottom
        • Border.all 统一设置边框样式
      • borderRadius 圆角效果
        • BorderRadius.circular 统一设置四个圆角
        • BorderRadius.only 分别设置
          • topLeft
            • Radius.circular
          • bottomLeft
      • boxShadow
        • BoxShadow
          • offset 阴影偏移量
            • Offset
          • color 阴影颜色
          • blurRadius 阴影的模糊程度值 越大与模糊的越明显
          • spreadRadius 阴影的扩散程度 负数缩小阴影面积 正数扩大阴影面积
      • shape 形状
        • BoxShape.rectangle 矩形
        • BoxShape.circle 圆形 此时不能使用圆角borderRadius 属性，会报错
      • gradient 渐变
        • RadialGradient 近向渐变
          • color: [Color.fromRGBO(7,10,25,1.0),Color.fromRGBO(3,140,255,1.0)]
        • LinearGradient 线性渐变，默认从最左边到最右边
          • color: [Color.fromRGBO(7,10,25,1.0),Color.fromRGBO(3,140,255,1.0)]
          • begin 渐变开始位置
          • end 结束位置
            • Alignment.topCenter
            • Alignment.bottomCenter

实例一

import 'package:flutter/material.dart'; 


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

// 继承静态组件
class MyApp extends StatelessWidget {

  //重写 build 方法 返回Widget组件
  //传一个build 上下文
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Hello TextWidget',
      // home 给个脚手架组件
      home:  Scaffold(
        appBar: AppBar(
          title: Text('Hello AppBar Title'),
          ),
        body: Center(
          child: Container(
            child: new Text(
              'new 出来的 Text',
              style: TextStyle(
                fontSize: 25.0
              ),
            ),
            /*
            * Alignment.bottomCenter 底部居中对齐
            * */
            alignment: Alignment.topCenter,
            width: 500.0,
            height: 400.0,
            color: Colors.deepPurple,
          ),
        ),
      ),
    );
  }

}

• MaterialApp 是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个widget。
• Scaffold 是Material库中提供的页面脚手架，它包含导航栏和Body以及FloatingActionButton（如果需要的话）。 本书后面示例中，路由默认都是通过Scaffold创建。
  

实例二

import 'package:flutter/material.dart'; 

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

// 继承静态组件
class MyApp extends StatelessWidget {

  //重写 build 方法 返回Widget组件
  //传一个build 上下文
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Hello TextWidget',
      // home 给个脚手架组件
      home:  Scaffold(
        appBar: AppBar(
          title: Text('Hello AppBar Title'),
          ),
        body: Center(
          child: Container(
            child: new Text(
              'new 出来的 Text',
              style: TextStyle(
                fontSize: 25.0
              ),
            ),
            /*
            * Alignment.bottomCenter 底部居中对齐
            * */
            alignment: Alignment.topCenter,
            width: 500.0,
            height: 400.0,
            // 线性渐变属性
            decoration: BoxDecoration(
              gradient: const LinearGradient(colors: [
                Colors.lightBlue,
                Colors.greenAccent,
                Colors.amberAccent
              ])
            ),
            /*
            * 上下左右内边距有都相同EdgeInsets.all(20.0)
            * */
            padding: const EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
            margin: const EdgeInsets.all(10.0),
          ),
        ),
      ),
    );
  }

}