如何在 Flutter 中制作具有不同功能的可重復使用容器

Question

您好，我正在使用容器使 AppBar 具有彩色漸變代碼是

Container appBarGradient(){
  return Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.bottomLeft,
              end: Alignment.topRight,
              colors: <Color>[Colors.red, Colors.white, Colors.blue])));
}

我還在構建一個底部 AppBar 並希望使漸變保持一致的顏色，因此我正在重用 appBarGradient。 但我想向 appBarGradient 添加一個子對象，我注意到它有一個 .child 方法，但我不知道如何使用它。

BottomAppBar mainBottomBar(){
  return BottomAppBar(
    child: appBarGradient().child

  );
}

這些方法有什么用？ 我可以使用它們在已有的小部件之上構建嗎？ 我什至不知道這叫什么，所以我很難在文檔中搜索我要找的東西。 謝謝！

Answer 1

不確定這是否是您要查找的內容，但您可以制作這樣的Gradient小部件：

class Gradient extends StatelessWidget {
  final Widget child;
  
  Gradient({this.child, Key key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.bottomLeft,
              end: Alignment.topRight,
              colors: <Color>[Colors.red, Colors.white, Colors.blue])),
      child: child);
  }
}

然后你可以像使用任何其他小部件一樣使用它，如下所示： Gradient(child: Text("I'm an example"))

Answer 2

不同的屏幕可以這樣使用不同的漸變色。 您可以將顏色分配給您想要的不同屏幕

class Gradient extends StatefulWidget {
  final Widget child;
  List<Color> color =[];

  Gradient({this.child, Key key,this.color}) : super(key: key,);

  @override
  _GradientState createState() => _GradientState();
}

class _GradientState extends State<Gradient> {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
  width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: widget.color
            )
        ),
        child: widget.child);
  }
}