Flutter容器(3):装饰容器(DecoratedBox)

 


一、DecoratedBox简介

装饰盒子??

在 Flutter 中,DecoratedBox小部件可以在其子部件绘制前或绘制后绘制一个装饰。这使得您可以创建各种复杂的背景边框渐变等效果。DecoratedBox接收一个decoration参数,常用的decorationBoxDecoration

二、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部件,用来添加内部的填充。效果图如下所示:

Flutter_layout_H.png


渐变拓展

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)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

效果图如下所示:

Flutter_layout_I.png


四、DecoratedBox使用注意事项

DecoratedBox是一个非常强大的部件,但在使用时也需要注意以下几点:

  • Decoration并不直接支持marginpadding,这需要通过使用ContainerPadding部件来实现。
  • DecoratedBox不能直接更改子部件的尺寸,如果需要更改子部件的尺寸,应该使用SizedBoxConstrainedBox等部件。

posted @   fengMisaka  阅读(186)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示