乐趣区

Flutter1Container1基础篇

jiezi

构造函数

首先我们来看一下 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
          ),
        ));
  }
}

退出移动版