Wigets学习之Container

Container → div(HTML)

一个设置基本样式大小的容器部件

• child：子部件
• height: 高度
• width：宽度
• padding: 内边距
• margin：外边距
• color：背景色
• transform：容器变换，类似于Css中的transform
• transformAlignment：变换的对齐方式
• decoration：装饰容器，指定此参数则不能指定color参数，是一个BoxDecoration类型
• alignment：容器中的子部件对齐方式，指定此参数则必须指定decoration参数
• constraints: 创建一个装饰部件，指定此参数则不能指定color和decoration参数

注意：Container 如果设置宽高无效的话，是因为 Container 计算宽高时需要考虑到父部件的尺寸约束(BoxConstraints)，BoxConstraints有四个参数: minWidth、maxWidth、minHeight、maxHeight。当宽高不在constraints范围内时则会强制计算符合constraints要求的值，而不再使用设置的宽高。可以使用 Row或Column部件包裹。

BoxDecoration

• color：背景色
• image: 背景图
• border: 边框
• borderRadius：圆角
• gradient：渐变背景

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        width: 400,
        padding: EdgeInsets.only(top: 40, left: 20),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(50)),
            image: DecorationImage(
                image: NetworkImage(
                    'https://img2.baidu.com/it/u=2969910583,3071772098&fm=26&fmt=auto&gp=0.jpg')),
            color: Colors.yellow,
            gradient: LinearGradient(colors: [Colors.red.shade400, Colors.blue]),
            border: Border.all(width: 2, color: Colors.white),
            boxShadow: [BoxShadow(color: Colors.green, blurRadius: 50)]),
        child: Text(
          'Hello Fluter',
          textDirection: TextDirection.ltr,
        ),
      ),
    );
  }
}

Center

使子部件居中对齐

• child：子部件
• widthFactor：宽度因子，不设置则子部件为默认大小
• heightFactor：高度度因子，不设置则子部件为默认大小

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      textDirection: TextDirection.ltr,
      children: [
        Center(
          widthFactor: 2,
          child: Container(
            color: Colors.cyan,
            child: Text(
              'Hello Flutter',
              textDirection: TextDirection.ltr,
            ),
          ),
        ),
        Center(
          child: Text(
            'Hello Flutter',
            textDirection: TextDirection.ltr,
          ),
        ),
        Center(
          child: Text(
            'Hello Flutter',
            textDirection: TextDirection.ltr,
          ),
        ),
      ],
    );
  }
}