参数详解

属性	说明
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]),),),);

效果图

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

完整代码

查看完整代码

Flutter Container 组件相关推荐

【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )
文章目录一.StatelessWidget 组件二.Container 组件三.BoxDecoration 组件四.Text 组件五.Icon 组件六. 相关资源一.StatelessW ...
Flutter 基础组件之 Container
官方简介中,说 Container 组件是一个方便绘制.定位和调整子组件大小的组件. 首先 Container 会在 child 子组件周围填充 padding(包括 decoration 中存在的 ...
Flutter 自定义组件实战之Cupertino（iOS）风格的复选框
继上一篇Flutter自定义组件的视频短课(视频地址: https://www.bilibili.com/video/BV1ap4y1U7UB/ )后,我们继续来聊自定义组件.视频中我为大家详解了Cu ...
Flutter 笔记 | Flutter 布局组件
布局类组件都会包含一个或多个子组件,布局类组件都是直接或间接继承SingleChildRenderObjectWidget 和MultiChildRenderObjectWidget的Widget,它 ...
Flutter Container、Center设置控件居中背景及其他属性
Flutter Container.Center设置控件居中背景及其他属性 //控件可以居中Container(alignment: Alignment.bottomCenter,//设置控件内容的位 ...
Flutter 输入框组件
文章目录 Flutter 输入框组件基本属性自动换行限制输入简单使用焦点控制自定义样式1 自定义样式2 Flutter 输入框组件基本属性 autofocus:是否自动获取焦点.obsc ...
一份超级详细的Flutter基础组件练习示例，请查收！
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
一个优秀的可定制化Flutter相册组件，看这一篇就够了
背景在做图片.视频相关功能的时候,相册是一个绕不开的话题,因为大家基本都有从相册获取图片或者视频的需求.最直接的方式是调用系统相册接口,基本功能是满足的,一些高级功能就不行了,例如自定义UI.多选图 ...
Flutter文本组件Text
Flutter 文本组件Text 在android中,一个页面,一般是用 Activity 或者是一个Fragement 来加载显示出来的,而其中的一个View 或者一个布局文件(layout.x ...

Flutter Container 组件

参数详解

代码示例

效果图

完整代码

Flutter Container 组件相关推荐

最新文章

热门文章