flutter - Flutter - 创建一个自定义样式的 Container 小部件，它“投影”子内容

Question

我想创建一个始终具有渐变背景的自定义容器小部件。原因是只在一处编码渐变，所以它可以在一处更改，但会影响整个应用程序。

我认为这是：

child: Container(
      height: double.infinity,
      width: double.infinity,
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(1, -1.0),
          end: const Alignment(-0.3, 0.0),
          colors: [
            initialGradientColor,
            Theme.of(context).colorScheme.primary
          ],
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [...more code...

我可以像这样提取到容器小部件吗？：

class GradientContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: // ****************** project content into here... ****************
      height: double.infinity,
      width: double.infinity,
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(1, -1.0),
          end: const Alignment(-0.3, 0.0),
          colors: [initialGradientColor, Theme.of(context).colorScheme.primary],
        ),
      ),
    );
  }
}

我需要找到一种将孩子添加到 GradientContainerWidget 的方法。有没有办法将内容投影到小部件的子项中？

视图中的用法如下所示：

child: GradientContainerWidget(
                child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [..... more children....])
            );

Answer 1

如果您正在寻找如何添加孩子，那么您可以创建一个构造函数并将其作为 Widget 传递。

class GradientContainerWidget extends StatelessWidget {

  final Widget child;

  GradientContainerWidget({this.child}); //you can pass key to

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child
      height: double.infinity,
      width: double.infinity,
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(1, -1.0),
          end: const Alignment(-0.3, 0.0),
          colors: [initialGradientColor, Theme.of(context).colorScheme.primary],
        ),
      ),
    );
  }
}