如何将小部件与自定义应用栏重叠答案

【问题标题】：How to overlap a widget with a custom appbar如何将小部件与自定义应用栏重叠
【发布时间】：2020-12-12 22:57:19
【问题描述】：

我想达到类似这样的效果：

这是我所拥有的：（蓝色容器隐藏在 appBar 下方）

这是我当前的代码：

Widget build(BuildContext context) {
    return Scaffold(
      appBar: GradesAppBar(
        title: "Grades",
        gradientBegin: Colors.red[200],
        gradientEnd: Colors.red,
      ),
      body: Stack(
        fit: StackFit.expand,
        overflow: Overflow.visible,
        children: <Widget>[
          Positioned(
            top: -20,
            left: MediaQuery.of(context).size.width / 2 - 150,
            child: Container(
              color: Colors.blue,
              width: 300,
              height: 60,
            ),
          ),
        ],
      ),
    );
  }

GradesAppBar 是一个带有 boxShadow、borderRadius 和渐变装饰的 Container。

【问题讨论】：

此stackoverflow.com/questions/53658208/custom-appbar-flutter供参考
谢谢！我通过删除 appBar 并将 GradesAppBar 作为子项添加到堆栈中来使其工作，并将 Top 0 的 Positioned 作为其直接父项。

标签： flutter dart

【解决方案1】：

当您使用堆栈来实现这种 UI 方法时，您应该删除 AppBar 并使其如下所示：-

Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        fit: StackFit.expand,
        overflow: Overflow.visible,
        children: <Widget>[
          GradesAppBar(
            title: "Grades",
            gradientBegin: Colors.red[200],
            gradientEnd: Colors.red,
          ),
          Positioned(
            top: -20,
            left: MediaQuery.of(context).size.width / 2 - 150,
            child: Container(
              color: Colors.blue,
              width: 300,
              height: 60,
            ),
          ),
        ],
      ),
    );
  }

最重要的；如果你的GradesAppBar 扩展了PreferredSizeWidget，我认为你应该用Container 替换它，并根据需要给它一些很酷的装饰：")

【讨论】：