Flutter Container 组件

目录

参数详解

代码示例

效果图

完整代码

---

Container 官网简介：一个便利的小部件，结合了常见的绘画，定位和大小调整小部件。

其实就是一个容器组件，既然是容器，那么，就一定可以装很多东西，而Container装的东西就是Flutter 其他组件。

参数详解

属性	说明
alignment	topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐 centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft：底部居左对齐 bottomRight：底部居右对齐
padding	内边距
margin	外边距
color	背景色
decoration	装饰  BoxDecoration类型
foregroundDecoration	前景装饰
width	容器宽
height	容器高
constraints	应用于子元素的附加约束
transform	Container 容器进行一些旋转、移动之类的操作
child	容器子元素

在这里对decoration属性进行详解，先看代码：

Container(
 decoration: BoxDecoration(
  //背景涂颜色
  color: Colors.yellow,
  border: Border.all(
   //边框颜色
   color: Colors.blue,
   //边框宽
   width: 2.0,
  ),
  borderRadius: BorderRadius.all(
   //圆角角度
   Radius.circular(10)
  )
 ),
),

以上介绍了decoration的简单使用，以下介绍以下BoxDecoration的属性：

属性	说明
color	颜色
image	图片
border	边框
borderRadius	边框圆角度
boxShadow	阴影  可以多色混合
gradient	渐变
backgroundBlendMode	背景
shape	容器形状，BoxShape.rectangle  矩形；BoxShape.circle 圆形

以上属性遵循原则：

1、gradient  >  image >  color    就是说 他们同时使用时 会优先显示gradient定义内容

2、shape不能同borderRadius一起使用  冲突，编译错误

 

代码示例

Center(
          child: Container(
            child: Text(
              '位于右侧的文本',
              textAlign: TextAlign.right,
              style: TextStyle(backgroundColor: Colors.blueAccent),//文字背景
            ),
            //容器高
            height: 300.0,
            //容器宽
            width: 300.0,
            //内边距
            padding: EdgeInsets.all(10),
            //装饰
            decoration: BoxDecoration(
              //颜色
              color: Colors.yellow,
              //边框
              border: Border.all(
                // 边框颜色
                color: Colors.blue,
                //边框宽度
                width: 2.0,
              ),
              //边框圆角度 
              borderRadius: BorderRadius.all(
                Radius.circular(10)
              ),
              //容器形状 默认矩形
              // shape: BoxShape.circle
              //阴影   可以多色混合
              boxShadow:[
                    BoxShadow(
                      color: Colors.green,
                      blurRadius: 50.0,
                    ),
                    BoxShadow(
                      color: Colors.red,
                      blurRadius: 50.0,
                    ),
              ],
              //背景渐变 可以多色渐变
              gradient: LinearGradient(colors: [Colors.red,Colors.blue]),
            ),
            
          ),
    );

效果图

请注意   混合颜色  和  渐变颜色 的区别

完整代码

查看完整代码