Flutter组件Container

简介

Container是Flutter中广泛使用的单容器组件

构造函数

 Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

• alignment 对齐方式
• padding 内边距
• color 背景颜色
• decoration 设置装饰 BoxDecoration 如：颜色、图片、边框、圆角、阴影等，不能给Container同时设置decoration和color属性
• foregroundDecoration 设置前景装饰
• width 宽度
• height 高度
• constraints 范围约束 minWidth、maxWidth、minHeight、maxHeight
• margin 外边距
• transform 变换效果 如：旋转、变形等
• transformAlignment Container变换后对齐方式

示例

1. 默认效果

Container(
    child: Text("Hello Flutter"),
)

2. 设置背景色

Container(
    color: Colors.orange,
    child: Text("Hello Flutter"),
)

3. 设置内外边距

Container(
     width: 300,
     height: 200,
     color: Colors.red,
     child: Container(
         color: Colors.orange,
         padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
         margin: EdgeInsets.all(40),
         child: Text("Hello Flutter"),
      ),
)

4. 设置装饰

设置圆角边框效果

Container(
      padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
      decoration: BoxDecoration(
          color: Colors.orange,
          border: Border.all(color: Colors.green, width: 3.0),
          borderRadius: BorderRadius.all(Radius.circular(20))
      ),
      child: Text("Hello Flutter"),
 ),

圆角矩形图片

Container(
     padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
     width: 200,
     height: 200,
     decoration: BoxDecoration(
         color: Colors.orange,
         border: Border.all(color: Colors.green, width: 5.0),
         borderRadius: BorderRadius.all(Radius.circular(20)),
         image: DecorationImage(
             image: NetworkImage(
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-fce4f8a778fe3f24bca2cafc709b6847_hd.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619932000&t=94d94f4650ff22cdff3afb8ab71b5462'),
             fit: BoxFit.cover)
          ),
 ),

圆形图片

Container(
     padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
     width: 200,
     height: 200,
     decoration: BoxDecoration(
         color: Colors.orange,
         border: Border.all(color: Colors.green, width: 5.0),
         shape: BoxShape.circle,
         image: DecorationImage(
             image: NetworkImage(
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-fce4f8a778fe3f24bca2cafc709b6847_hd.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619932000&t=94d94f4650ff22cdff3afb8ab71b5462'),
             fit: BoxFit.cover)
          ),
 ),

5. Alignment 对齐方式

设置对齐方式后，Container将会充满其父控件

Container(
     color: Colors.orange,
     alignment: Alignment.center,
     child: Text('Hello Flutter'),
),

6. 固定宽高

Container(
     width: 200,
     height: 100,
     color: Colors.orange,
     alignment: Alignment.center,
     child: Text('Hello Flutter'),
),

也可以通过constraints属性设置宽高，constraints不设置时，默认最小宽高0 最大宽高无限

Container(
     constraints: BoxConstraints.tightForFinite(width: 200, height: 100),
     color: Colors.orange,
     alignment: Alignment.center,
     child: Text('Hello Flutter'),
),

7. transform 变换

Container(
     constraints: BoxConstraints.tightForFinite(width: 200, height: 100),
     color: Colors.orange,
     alignment: Alignment.center,
     transform: Matrix4.rotationZ(0.3),
     child: Text('Hello Flutter'),
),

Matrix4.rotationZ() 单位：弧度