第五节:Flutter 中Container容器组件

1. Container组件的了解

关于container组件的介绍:

Container是一个组合类的容器，本身并不对应具体的RenderObject
Container是DecorationBox,Padding,Align,Align等一些组建的组合
因此可以通过Container组件实现同时需要装饰,变换,限制等场景

1.1 Container源码中的参数

Container({
    Key key,
    this.alignment,
    this.padding,       //容器内补白，属于decoration的装饰范围
    this.color,         // 背景色
    this.decoration,    // 背景装饰
    this.foregroundDecoration,  // 前景装饰
    double width,            //容器的宽度
    double height,            //容器的高度
    BoxConstraints constraints,  //容器大小的限制条件
    this.margin,           //容器外补白，不属于decoration的装饰范围
    this.transform,       //变换
    this.child,
    this.clipBehavior = Clip.none,
})

1.2 Container 容器组件常用参数

名称	功能
alignment	topCenter 顶部居中对齐<br />topLeft: 顶部左对齐<br />topRight: 顶部右对齐<br />center: 水平垂直居中对齐<br />centerLeft: 垂直居中,水平左对齐<br />centerRight: 垂直居中,水平右对齐<br />bottomCenter: 底部居中对齐<br />bottomLeft: 底部左对齐<br />bottomRight: 底部有对齐
decoration	decoration: BoxDecoration(<br /> color: Colors.blue,<br /> border: Border.all(<br /> color: Colors.red,<br /> width: 2.0<br /> )<br /> BorderRadius.all(<br /> Radius.circular(8.0)<br /> )<br /> )
width	容器的宽度 double值
height	容器的高度 double值
margin	margin 属性表示Container与外部的其他组件的距离<br />EdgeInsets.all(20.0)
padding	padding 就是Container的内边距,指Container边缘与child之间的距离<br />padding: EdgeInsets.all(10.0)
transform	让Container容易进行一些转换之类的
child	子组件

1.3 容器参数注意项

容器大小可以通过width,height指定,也可通过constraints指定
如果同时存在,width,height优先
color和decoration是互斥的,同时存在会报错
因为指定color时,Container内部会自动创建decoration

1.4 Container组件使用示例

在示例中,同时复习了一下Text组件所学内容

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Text(
                    "你好,Flutter",                           // 文本内容
                    // 关于Text组件参数的复习
                    style: TextStyle(
                        fontSize: 30.0,                       // 字体大小
                        height: 2,                            // 行高
                        color: Colors.white,                  // 文字颜色
                        fontWeight: FontWeight.bold,          // 文字粗体
                        fontStyle: FontStyle.italic,          // 文字斜体
                        letterSpacing: 6,                     // 字间距
                        decoration: TextDecoration.underline, // 下划线

                    )
                ),
                width: 300,                         // 容器宽度
                height: 300,                        // 容器的高度
                // 容器的背景颜色color, 不能与decoration同时使用
                // color: Colors.blue,      
                padding: EdgeInsets.all(10),        // 容器的padding
                transform: Matrix4.rotationZ(0.1),  // X轴旋转0.1弧度
                decoration: BoxDecoration(   //容器的描述
                    color: Colors.green,     // decoration中也有color,背景颜色
                )
            )
        );
    }
}

显示结果

container容器组件_图1.png

在Container组件的使用过程中,我们会发现很多属性需要其他组件来修饰,

接下来,我们看看其他的组件信息

2. Padding 填充

Padding可以给其子节点添加填充（留白），也就是我们通常所说的内边距

Container组件中的padding参数是有EdgeInsets类(组件)进行修饰

2.1 EdgeInsets

先看一下EdgeInsets修饰值的方法

formLTRB(double left, double top, double right, double bottom)分别指定四个方向
all(double value), 所有方向设置相同值的padding
only({left ,top, right ,bottom}), 可以设置具体某个发方向的填充
symmetric({vertical,horizontal}) 用于设置对称方向的填充

vertical 指的是top和bottom , horizontal 指的是left和right

2.2 示例代码

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Text(
                    "你好,Flutter",       // 文本内容
                    style: TextStyle(
                        fontSize: 30.0,     // 字体大小
                        color:Colors.white,
                        height: 2,          // 行高
                        letterSpacing: 6,   // 字间距
                    )
                ),
                width: 300,               // 容器宽度
                height: 300,              // 容器的高度
                
                // padding值设置的四种方法:
           
                // 1.all方法: 四个方向的padding都是10
                //padding: EdgeInsets.all(10), 
                
                // 2.fromLTRB: 左上右下paddin值为10,20,30,0
                //padding: EdgeInsets.fromLTRB(10,20,30,0), 
                
                 // 3.only: 值是可选参数, 只有left有20px的padding
                //padding: EdgeInsets.only(left: 20),   
                
                // 4.symmetric: 值是可选参数, 只有左右有30px的padding
                padding: EdgeInsets.symmetric(horizontal: 30), 
                
                
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                )
            )
        );
    }
}

显示结果:

padding填充_图2.png

3. DecoratedBox 装饰容器

DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等。DecoratedBox定义如下：

const DecoratedBox({
    Decoration decoration,
    DecorationPosition position = DecorationPosition.background,
    Widget child
})

decoration：代表将要绘制的装饰，它的类型为Decoration。Decoration是一个抽象类.

但是我们通常使用BoxDecoration,BoxDecoration是Decoration的一个子类

3.1 BoxDecoration

BoxDecoration用来实现了常用的装饰元素的绘制

参数

BoxDecoration({
    Color color,                         //颜色
    DecorationImage image,               //图片
    BoxBorder border,                    //边框
    BorderRadiusGeometry borderRadius,   //圆角
    List<BoxShadow> boxShadow,           //阴影,可以指定多个
    Gradient gradient,                   //渐变
    BlendMode backgroundBlendMode,       //背景混合模式
    BoxShape shape = BoxShape.rectangle, //形状
})

3.2 示例代码

Widget build(BuildContext content){
    return Center(
        child: Container(
            child: Text(
                "按钮",       // 文本内容
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 20.0,     // 字体大小
                    color:Colors.white,
                    height: 2,          // 行高
                    letterSpacing: 6,   // 字间距
                )
            ),
            width: 100,               // 容器宽度
            height: 50,              // 容器的高度

            decoration: BoxDecoration(
                // 背景渐变
                gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), 
                borderRadius: BorderRadius.circular(10.0),  // 10像素圆角
            )
        )
    );
}
}

结果

装饰容器_图3.png

4. 变换 Transform

Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。

Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作，

至于矩阵变换,不是我们的重点, 矩阵是线性代数的概念,我们只需要了解Flutter中如何使用就OK了

4.1 变换示例:

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Text(
                    "按钮",       // 文本内容
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 20.0,     // 字体大小
                        color:Colors.white,
                        height: 2,          // 行高
                        letterSpacing: 6,   // 字间距
                    )
                ),
                width: 100,               // 容器宽度
                height: 50,              // 容器的高度

                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                ),
                // transform的变化
                
                // 变化位移
                //transform: Matrix4.translationValues(10, 100, 0),
                
                // 旋转
                //transform: Matrix4.rotationZ(0.3),
                
                // 缩放
                transform: Matrix4.diagonal3Values(0.5, 1, 1) ,
            )
        );
    }
}