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),,这里的topbottomleftright可以根据自己需求设置,不一定每个都要设置,不设置的就是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),//设置颜色
      ),
    );
  }
}

《Flutter--1.Container--(1.基础篇)》

练习二: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
      ),
    );
  }
}

《Flutter--1.Container--(1.基础篇)》

练习三: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,
      ),
    );
  }
}

《Flutter--1.Container--(1.基础篇)》

练习四: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,
      )
    );
  }
}

《Flutter--1.Container--(1.基础篇)》

  • 当给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
          ),
        ));
  }
}

《Flutter--1.Container--(1.基础篇)》

  • 当父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
          ),
        ));
  }
}

《Flutter--1.Container--(1.基础篇)》

    原文作者:DreamFightter
    原文地址: https://segmentfault.com/a/1190000020169433
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞