Flutter容器(3):装饰容器(DecoratedBox)
一、DecoratedBox简介
装饰盒子??
在 Flutter 中,DecoratedBox
小部件可以在其子部件绘制前或绘制后绘制一个装饰。这使得您可以创建各种复杂的背景
、边框
、渐变
等效果。DecoratedBox
接收一个decoration
参数,常用的decoration
有BoxDecoration
。
二、DecoratedBox属性详解
DecoratedBox 的主要属性如下:
属性 | 作用 | 示例代码 |
---|---|---|
decoration | 背景装饰属性 | BoxDecoration(color: Colors.blue, border: Border.all(color: Colors.black)) |
position | 装饰绘制在子部件之前还是之后 | DecorationPosition.background |
child | 子部件 | Text('Hello World') |
三、DecoratedBox代码示例
让我们通过一些实际的代码示例来了解如何使用 DecoratedBox:
import 'package:flutter/material.dart';
void main() {
runApp(const DecoratedBoxExample());
}
class DecoratedBoxExample extends StatelessWidget {
const DecoratedBoxExample({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('DecoratedBox示例')),
body: ListView(
padding: const EdgeInsets.all(10.0),
children: <Widget>[
// 基础装饰
Container(
margin: const EdgeInsets.all(10.0),
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 7,
offset: const Offset(0, 3),
),
],
),
child: const Padding(
padding: const EdgeInsets.all(10),
child: Text('基础装饰', style: TextStyle(color: Colors.white)),
),
),
),
// 边框装饰
Container(
margin: const EdgeInsets.all(10.0),
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(
color: Colors.black,
width: 3,
),
borderRadius: BorderRadius.circular(10),
),
child: const Padding(
padding: EdgeInsets.all(10),
child: Text('边框装饰', style: TextStyle(color: Colors.white)),
),
),
),
// 渐变装饰
Container(
margin: const EdgeInsets.all(10.0),
child: DecoratedBox(
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.blue, Colors.white],
),
borderRadius: BorderRadius.circular(10),
),
child: const Padding(
padding: EdgeInsets.all(10),
child: Text('渐变装饰', style: TextStyle(color: Colors.black)),
),
),
),
],
),
),
);
}
}
在这个代码示例中,我创建了三个DecoratedBox
部件,分别展示了基础装饰、边框装饰和渐变装饰的效果。每个DecoratedBox
部件都包含一个Padding
部件,用来添加内部的填充。效果图如下所示:
渐变拓展
import 'package:flutter/material.dart';
void main() {
runApp(const GradientExample());
}
class GradientExample extends StatelessWidget {
const GradientExample({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('渐变示例')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// 线性渐变
DecoratedBox(
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.red, Colors.orange, Colors.yellow],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(10),
),
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
child: Text('线性渐变',
style: TextStyle(color: Colors.white, fontSize: 20)),
),
),
// 径向渐变
DecoratedBox(
decoration: BoxDecoration(
gradient: const RadialGradient(
colors: [Colors.red, Colors.orange, Colors.yellow],
radius: 1,
center: Alignment.center,
),
borderRadius: BorderRadius.circular(10),
),
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
child: Text('径向渐变',
style: TextStyle(color: Colors.white, fontSize: 20)),
),
),
// 扫描渐变
DecoratedBox(
decoration: BoxDecoration(
gradient: const SweepGradient(
colors: [Colors.red, Colors.orange, Colors.yellow],
startAngle: 0.0,
endAngle: 2 * 3.14159,
),
borderRadius: BorderRadius.circular(10),
),
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
child: Text('扫描渐变',
style: TextStyle(color: Colors.white, fontSize: 20)),
),
),
],
),
),
),
);
}
}
效果图如下所示:
四、DecoratedBox使用注意事项
DecoratedBox
是一个非常强大的部件,但在使用时也需要注意以下几点:
Decoration
并不直接支持margin
和padding
,这需要通过使用Container
或Padding
部件来实现。DecoratedBox
不能直接更改子部件的尺寸,如果需要更改子部件的尺寸,应该使用SizedBox
、ConstrainedBox
等部件。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库