Flutter 容器布局 Container Widget
Container将会是我们以后最常用的控件之一，Container是单容器类控件，即只包含一个子控件。Container可以装饰和定位子控件，例如设置背景颜色、形状等。
Container 具体用法
alignment 对齐排列方式
padding padding
color 背景色
decoration 背景装饰
foregroundDecoration 前景装饰
wdith 宽度
height 高度
constraints 容器约束条件
transform 旋转变换
child 布局子Widget
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class ContainerExample extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ContainerExampleState();
}}class ContainerExampleState extends State<ContainerExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Container Widget"),
),
body: Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
padding: const EdgeInsets.all(8.0),
color: Colors.tealAccent.shade400,
alignment: Alignment.center,
child: Text(
"Hello World",
style: Theme.of(context)
.textTheme .display1 .copyWith(color: Colors.white),
),
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/776eaf92140f6f8f3c3f39fb51de2cc4~300x300.image'),
centerSlice: Rect.fromLTRB(270, 180, 1360, 730))),
transform: Matrix4.rotationZ(0.1),
),
);
}}
image.png
示例2
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class Container1Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "容器组件示例",
home: Scaffold(
appBar: AppBar(
title: Text("容器组件示例"),
),
body: Center(
// 添加容器
child: Container(
width: 200,
height: 200,
// 添加边框装饰效果
decoration: BoxDecoration(
color: Colors.white,
// 设置上下左右四哥边框的样式（颜色，边框宽度）
border: Border.all(color: Colors.grey, width: 8.0),
// 边框的弧度
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
child: Text(
"容器组件示例",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 28.0),
),
),
),
),
);
}}
image.png
示例3
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class Container2Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "容器组件示例",
home: Scaffold(
appBar: AppBar(
title: Text("容器组件示例"),
),
body: Column(
children: [
Row(
children: [
// 防止内容溢出
Expanded(
child: Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
// 边框设置为10.0蓝灰色
border: Border.all(width: 10.0, color: Colors.blueGrey),
// 圆角8.0
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
//边距4.0
margin: EdgeInsets.all(4.0),
child: Image.asset("images/1.jpg"),
),
),
Expanded(
child: Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
// 边框设置为10.0蓝灰色
border: Border.all(width: 10.0, color: Colors.blueGrey),
// 圆角8.0
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
//边距4.0
margin: EdgeInsets.all(4.0),
child: Image.asset("images/2.jpg"),
),
),
],
),
Row(
children: [
// 防止内容溢出
Expanded(
child: Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
// 边框设置为10.0蓝灰色
border: Border.all(width: 10.0, color: Colors.blueGrey),
// 圆角8.0
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
//边距4.0
margin: EdgeInsets.all(4.0),
child: Image.asset("images/3.jpg"),
),
),
Expanded(
child: Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
// 边框设置为10.0蓝灰色
border: Border.all(width: 10.0, color: Colors.blueGrey),
// 圆角8.0
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
//边距4.0
margin: EdgeInsets.all(4.0),
child: Image.asset("images/4.jpg"),
),
),
],
),
],
),
),
);
}}
作者：Cache技术分享
链接：https://www.jianshu.com/p/50b951fc87a7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。