1. 留白 Padding
字节点和父节点之间填充空白区域
const Card(
shape: RoundedRectangleBorder(),
child: Padding(
padding: EdgeInsets.all(10),
child: Text("Sakura ! "),
),
)
EdgeInsets 指定不同的填充方式, 最常用的两种:
only(left, top, right, botton): 分别指定上下左右的填充, 可以单独指定
all(double value): 四个方向填充相同数值
2. 限制子组件的大小 SizeBox
限制子组件的大小
body: const SizedBox(
width: 200,
height: 200,
child: Column(
children: [
FlutterLogo(
size: 300, // 会显示超出容器大小
),
]
)
)
作为间隔
两个 FlutterLogo 之间间隔 100
const SizedBox(
width: 200,
height: 200,
child: Column(
children: [
FlutterLogo(),
SizedBox(
height: 100,
),
FlutterLogo()
]
)
)
3. 装饰器 DecoratedBox
可以给子组件设置前景，背景，边框，渐变等装饰效果
const BoxDecoration({
this.color, // 颜色
this.image, // 图片
this.border, // 边框
this.borderRadius, // 圆角
this.boxShadow, // 阴影
this.gradient, // 渐变
this.backgroundBlendMode, // 背景混合模式
this.shape = BoxShape.rectangle, // 形状
})
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(16),
),
child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Hello World"),
Text("Hello World"),
]
)
)
),
4. Container
Container 是一个组合类容器，它本身不对应具体的 RenderObject，它是
DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个 Container 组件可以实现同时需要装饰、变换、限制的场景。
4.1 定义
Container 属性
Container({
Key key,
// 容器子Widget对齐方式
this.alignment,
// 容器内部padding
this.padding,
// 背景色
Color color,
// 背景装饰
Decoration decoration,
// 前景装饰
this.foregroundDecoration,
// 容器的宽度
double width,
// 容器的高度
double height,
// 容器大小的限制条件
BoxConstraints constraints,
// 容器外部margin
this.margin,
// 变换，如旋转
this.transform,
// 容器内子Widget
this.child,
})
BoxDecoration 装饰属性
const BoxDecoration({
// 背景色
this.color,
// 背景图片
this.image,
// 边框样式
this.border,
// 边框圆角
this.borderRadius,
// 阴影
this.boxShadow,
// 渐变
this.gradient,
// 背景混合模式
this.backgroundBlendMode,
// 形状
this.shape = BoxShape.rectangle,
})
4.2 Demo
class ContainerPage extends StatelessWidget {
const ContainerPage({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 300,
height: 300,
// color: Colors.amber,
// 外边距
margin: const EdgeInsets.all(20.0),
// 内边距
padding: const EdgeInsets.all(30.0),
// 子Widget居中
alignment: Alignment.center,
// 容器的装饰
decoration: BoxDecoration(
color: Colors.blue,
// 边框
border: Border.all(
color: Colors.black,
width: 5,
),
// 圆角
borderRadius: BorderRadius.circular(20),
// 阴影
boxShadow: const [
// 两个阴影叠加
BoxShadow(
color: Colors.grey,
offset: Offset(10, 10),
blurStyle: BlurStyle.normal,
),
BoxShadow(
color: Colors.deepOrange,
offset: Offset(5, 5),
blurStyle: BlurStyle.inner,
)
],
image: const DecorationImage(
image: NetworkImage(
"<https://images.pexels.com/photos/15804651/pexels-photo-15804651.jpeg>"
),
// 图片的缩放方式
fit: BoxFit.cover
),
),
// 容器前景装饰
foregroundDecoration: BoxDecoration(
color: Colors.blue.withOpacity(0.5),
borderRadius: BorderRadius.circular(20),
),
// 转换
// transform: Matrix4.rotationZ(0.5),
// 约束
// constraints: const BoxConstraints(
// maxHeight: 100,
// maxWidth: 100,
// ),
child: const Text("Sakura"),
),
);
}
}
评论区