代码之家 › 专栏 › 技术社区 › BeniaminoBaggins

颤振-创建一个定制样式的容器小部件,用于“投影”子内容

flutter-get flutter-widget flutter

BeniaminoBaggins · 技术社区 · 5 年前

我想创建一个自定义容器小部件,它总是有渐变背景。原因是只在一个地方对渐变进行编码,所以它可以在一个地方更改,但会影响整个应用程序。

我认为:

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....])
            );

1 回复 | 直到 5 年前

Anas Mohammed 5 年前

如果您正在研究如何添加一个子项,那么您可以创建一个构造函数并将其作为小部件传递。

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

推荐文章

Rami Dhouib · Flutter:如果等待时间超过2秒,则执行操作

1 年前

5rod · 如何在three_js(Flutter)中设置缓冲区几何属性?

1 年前