Flutter开发之——单组件布局容器-Container

| child | 子组件 | Widget对象 |

[](()三 示例

---

[](()3.1 文字

[](()只有子控件，没有任何参数

Container(child: Text(‘文字’,style:TextStyle(fontSize: 26),),)

[](()设置背景色

Container(

color: Colors.blue,

child: Text(‘文字’,style:TextStyle(fontSize: 26) ,),),

[](()padding和margin

Container(

color: Colors.blue,

child: Text(‘文字’,style:TextStyle(fontSize: 26) ,),

padding: EdgeInsets.all(20),

margin: EdgeInsets.all(30),

)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AXic6jEP-1650987223930)(https://cdn.jsdelivr.net/gh/PGzxc/CDN@master/blog-flutter/flutter-container-text-padding-margin.png)]

[](()Decoration 装饰(背景)

Container(

child: Text(‘文字’,style:TextStyle(fontSize: 26) ,),

padding: EdgeInsets.symmetric(horizontal: 10),

decoration: BoxDecoration(

shape: BoxShape.rectangle,

borderRadius: BorderRadius.all(Radius.circular(20)),

color: Colors.blue

),

),

[](()Decoration 装饰(边框)

Container(

child: Text(‘文字’,style:TextStyle(fontSize: 26) ,),

padding: EdgeInsets.symmetric(horizontal: 10),

decoration: BoxDecoration(

borderRadius: BorderRadius.circular(12),

border: Border.all(

color: Colors.blue,

width: 2,

),

),

),

[](()transform 变换

Container(

child: Text(‘文字’,style:TextStyle(fontSize: 26) ,),

transform: Matrix4.skewX(10),

),

[](()3.2 图片

[](()圆角图片

Container(

height: 200,

width: 200,

decoration: BoxDecoration(

image: DecorationImage(

image: AssetImage(“images/flutter.png”),

fit: BoxFit.cover,

),

border: Border.all(

color: Colors.blue,

width: 2,

), 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】

borderRadius: BorderRadius.circular(12),

),

),

[](()圆形图片

Container(

height: 200,

width: 200,

decoration: BoxDecoration(

image: DecorationImage(

image: AssetImage(“images/flutter.png”),

fit: BoxFit.cover,

),

border: Border.all(

color: Colors.blue,

width: 2,

),

shape: BoxShape.circle,

),

r(

height: 200,

width: 200,

decoration: BoxDecoration(

image: DecorationImage(

image: AssetImage(“images/flutter.png”),

fit: BoxFit.cover,

),

border: Border.all(

color: Colors.blue,

width: 2,

),

shape: BoxShape.circle,

),