| 类型 | 作用特点 |
|---|---|
| Container | 只有一个子 Widget。默认充满,包含了padding、margin、color、宽高、decoration 等配置。 |
| Padding | 只有一个子 Widget。只用于设置Padding,常用于嵌套child,给child设置padding。 |
| Center | 只有一个子 Widget。只用于居中显示,常用于嵌套child,给child设置居中。 |
| Stack | 可以有多个子 Widget。 子Widget堆叠在一起。 |
| Column | 可以有多个子 Widget。垂直布局。 |
| Row | 可以有多个子 Widget。水平布局。 |
| Expanded | 只有一个子 Widget。在 Column 和 Row 中充满。 |
| ListView | 可以有多个子 Widget。自己意会吧。 |
在 Flutter 中,BoxDecoration 是一个用于装饰容器的类,它可以为 Widget(如 Container、Card 等)添加各种视觉效果。
基本概念
BoxDecoration 允许你为矩形区域添加背景色、边框、阴影、渐变、形状等装饰效果。
主要属性
1. color - 背景颜色
Dart
Container(
decoration: BoxDecoration(
shape: BoxShape.circle, // 圆形
color: Colors.red,
),
width: 100,
height: 100,
child: Icon(Icons.star, color: Colors.white),
)
2. border - 边框
Dart
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 2.0,
),
),
child: Text('带边框'),
)
3. borderRadius - 圆角
Dart
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
color: Colors.green,
),
child: Text('圆角容器'),
)
boxShadow- 阴影
Dart
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
blurRadius: 5.0,
offset: Offset(0, 3),
),
],
color: Colors.white,
),
child: Text('带阴影的容器'),
)
5. gradient - 渐变
Dart
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.blue, Colors.purple],
),
),
child: Text('渐变背景'),
)
6. shape - 形状
Dart
Container(
decoration: BoxDecoration(
shape: BoxShape.circle, // 圆形
color: Colors.red,
),
width: 100,
height: 100,
child: Icon(Icons.star, color: Colors.white),
)