【 -Flutter自定义组件- 】Wrapper组件，包裹装饰你的一切

在Flutter中，Wrapper组件通常用于包裹其他组件，并可以应用装饰（如背景、边框、阴影等）。Flutter提供了一些内置的Wrapper组件，如Container、Padding、DecoratedBox等，也可以通过Stack和Positioned组件创建自定义的Wrapper组件。

以下是一个简单的自定义Wrapper组件的例子，它包裹了一个子组件并添加了背景颜色和边框：

import 'package:flutter/material.dart';
 
class CustomWrapper extends StatelessWidget {
  final Widget child;
  final Color backgroundColor;
  final Border border;
 
  const CustomWrapper({
    Key? key,
    required this.child,
    this.backgroundColor = Colors.transparent,
    this.border = const Border(),
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: backgroundColor,
        border: border,
      ),
      child: child,
    );
  }
}
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomWrapper(
            child: Text('Hello, World!'),
            backgroundColor: Colors.yellow.shade200,
            border: Border.all(color: Colors.blue.shade400, width: 2.0),
          ),
        ),
      ),
    );
  }
}

在这个例子中，CustomWrapper类是一个自定义的Wrapper组件，它接受一个子组件和背景颜色以及边框作为参数。它使用DecoratedBox来装饰子组件，并在其上应用背景颜色和边框。在main函数中，我们创建了一个MyApp应用，其中使用了CustomWrapper组件，为Text组件添加了黄色的背景颜色和蓝色的边框。