Flutter--1.Container--（1.基础篇）

构造函数

首先我们来看一下Container的构造函数

Container({
  this.alignment, //设置子元素的对齐方式
  this.padding, //容器内边距，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
})

• alignment：设置子widget的在container中的对齐方式，其对齐方式有：

  1. alignment:Alignment.bottomCenter; // 居中下对齐
  2. alignment:Alignment.bottomLeft; //左下角对齐
  3. alignment:Alignment.bottomRight; //右下角对齐
  4. alignment:Alignment.center; //居中对齐
  5. alignment:Alignment.centerLeft; //居中左对齐
  6. alignment:Alignment.centerRight; //居中有对齐
  7. alignment:Alignment.topCenter; //居中上对齐
  8. alignment:Alignment.topRight; //右上角对齐
  9. alignment:Alignment.topLeft; //左上角对齐

• padding:设置container的内边距

  1. 分别设置内边距：padding: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0),,这里的top，bottom，left，right可以根据自己需求设置，不一定每个都要设置，不设置的就是0.0。
  2. 转圈设置：padding:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0),LTRB分别代表left,top,right,bottom。
  3. 水平垂直方向设置：padding: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0),当你的上下，左右的内边距是堆成的，那么这时候可以用这个属性来设置vertical代表垂直方向，horizontal代表水平方向.
• margin:设置container的外边距，其值的设置方式和padding一样

• color:设置container的背景颜色

  1. 十六进制表示方法：color: Color(0xffFFFFFF),这里的0x是固定的，ff代表颜色的透明度，后面的六位代表颜色的值

  2. ARGB表示方法：color: Color.fromARGB(2, 29, 30, 10),

     1. A透明度，取值范围是0～255；
     2. R红色，取值范围是0～255；
     3. G绿色，取值范围是0～255；
     4. B蓝色，取值范围是0～255。

  3. RGBO表示方法：color: Color.fromRGBO(20, 30, 100, .9),

     1. R红色，取值范围是0～255；
     2. G绿色，取值范围是0～255；
     3. B蓝色，取值范围是0～255；
     4. O透明度，取值范围是0～1；
• width：container的宽，用double类型的数字表示
• height：container的高，用double类型的数字表示
• child：container的子widget

练习

练习一:container的宽高背景色

• 设置一个正方形，宽200.0，高200.0，背景颜色为黑色

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container'),),
      body: Container(
        width: 200.0,//设置宽
        height: 200.0,//设置高
        color: Color(0xff000000),//设置颜色
      ),
    );
  }
}

练习二：container的透明度

• 设置一个正方形，宽200.0，高200.0，背景色为黑色，透明度为0.3

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container'),),
      body: Container(
        width: 200.0,//设置宽
        height: 200.0,//设置高
        color: Color.fromRGBO(0, 0, 0, .3),//设置颜色,.3代表透明度，也可以写成0.3
      ),
    );
  }
}

练习三：container的外边距margin

• 这是一个正方形，宽高自定义，距离顶部300.0，距离左边100.0

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container'),),
      body: Container(
        margin: EdgeInsets.only(top: 300.0,left: 100.0),
        width: 200.0,//设置宽
        height: 200.0,//设置高
        // 这里的颜色可以用单词的形式来设置
        color: Colors.red,
      ),
    );
  }
}

练习四：container的子widget

• container不设置宽高的时候，默认是撑满父widget的

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container'),),
      body: Container(
        color: Colors.red,
      )
    );
  }
}

• 当给container一个设置了宽高的widget以后，container的大小就跟子container的宽高一样

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Container'),
        ),
        body: Container(
          color: Colors.red,
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Color.fromRGBO(0, 0, 0, .2), //设置一个透明色的背景，方便看到父container
          ),
        ));
  }
}

• 当父container设置了宽高以后，子container的宽高就会失效

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Container'),
        ),
        body: Container(
          width: 400.0,
          height: 400.0,
          color: Colors.red,
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Color.fromRGBO(0, 0, 0, .5), //设置一个透明色的背景，方便看到父container
          ),
        ));
  }
}