类型 | 作用特点 |
---|---|
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),
)