Flutter 常用布局之Container,Android开发经验谈
在Flutter中,Container是一个非常常用的布局组件,它是一种包装类,可以装其他的Widget。Container可以设置背景颜色、边框、阴影、边距、宽高等属性。
以下是一些使用Container的示例代码:
- 创建一个简单的Container,并设置背景颜色和宽高:
Container(
color: Colors.blue,
width: 200,
height: 200,
)
- 创建一个Container,并设置边框和边距:
Container(
color: Colors.blue,
width: 200,
height: 200,
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow, width: 5),
borderRadius: BorderRadius.circular(20),
),
)
- 创建一个Container,并设置内边距和子Widget:
Container(
color: Colors.blue,
width: 200,
height: 200,
padding: EdgeInsets.all(20),
child: Text('Hello, Container!'),
)
- 创建一个Container,并设置背景图片:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://picsum.photos/250?image=9'),
fit: BoxFit.cover,
),
),
width: 200,
height: 200,
)
- 创建一个Container,并设置内部子Widget对齐方式:
Container(
color: Colors.blue,
width: 200,
height: 200,
alignment: Alignment.center,
child: Text('Hello, Container!'),
)
- 创建一个Container,并设置阴影:
Container(
color: Colors.blue,
width: 200,
height: 200,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0,
),
],
),
)
以上代码展示了如何在Flutter中使用Container,并对其进行各种属性的设置。Container是Flutter布局中一个非常基础和强大的组件,可以满足大部分布局需求。
评论已关闭