flutter的decoratedbox组件示例1

以下是一个使用DecoratedBox组件为容器添加背景色、边框和阴影的完整代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DecoratedBox Example'),
        ),
        body: Center(
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.blue, // 背景色
              border: Border.all( // 边框
                color: Colors.black,
                width: 2.0,
              ),
              borderRadius: BorderRadius.circular(10), // 圆角边框
              boxShadow: [ // 阴影
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  spreadRadius: 2,
                  blurRadius: 5,
                  offset: Offset(0, 3),
                ),
              ],
            ),
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Text(
                '这是一个装饰过的容器',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

以下是对这段代码的分析：
一、整体结构
这段 Flutter 代码创建了一个简单的应用程序，展示了如何使用DecoratedBox组件来为一个文本添加装饰效果。

二、主要部分分析
MyApp类：
应用的入口点，是一个StatelessWidget。
创建了一个MaterialApp，设置了一个带有AppBar和Scaffold的主页面。在body中，显示了一个使用DecoratedBox装饰的文本组件。

DecoratedBox组件：
decoration属性用于设置装饰效果，包含以下几个方面：
color：设置背景颜色为蓝色。
border：通过Border.all设置了一个黑色、宽度为 2.0 的边框。
borderRadius：设置了半径为 10 的圆角边框。
boxShadow：添加了一个黑色、不透明度为 0.3、扩散半径为 2、模糊半径为 5、偏移量为 (0, 3) 的阴影效果。
child属性是一个使用Padding包裹的Text组件，设置了内边距为 20.0，文本颜色为白色，显示特定的内容。

三、总结
这段代码演示了如何使用DecoratedBox组件为一个组件添加多种装饰效果，包括背景颜色、边框、圆角边框和阴影。通过组合这些装饰属性，可以创建出具有丰富视觉效果的界面元素。这种方式可以在需要为界面元素添加个性化装饰时非常有用，提高了应用程序的视觉吸引力。