Flutter 在两个小部件之间实现中心叠加

Question

我想添加带有背景图案的扩展应用程序栏。在此下方填充可滚动内容的屏幕。在中心的两个视图上方，我想显示“标题内容”。

我目前的看法

1. 目前我正在使用 CompositedTransformTarget 并显示叠加层。我遇到的问题是，当导航到下一个屏幕然后返回时，我必须隐藏/显示叠加层。有暂停/恢复小部件的事件吗？

@override
  Widget build(BuildContext context) {
    return PopScope(
        canPop: true,
        onPopInvoked: (didPop) {
          _removeHeaderInfoOverlay();
        },
        child: Scaffold(
          body:
              Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
            Container(
              decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 5,
                      blurRadius: 7,
                      offset: Offset(0, 3), // changes position of shadow
                    ),
                  ],
                  color: Color(0xff00B9FF),
                  image: const DecorationImage(
                    fit: BoxFit.fill,
                    image: AssetImage('assets/images/app_bar_pattern.png'),
                  )),
              child: Column(
                children: [
                  _appBarView(context),
                  CompositedTransformTarget(
                    link: _layerLink,
                    child: SizedBox(height: shopOverviewHeight / 2),
                  )
                ],
              ),
            ),
            Expanded(
                child: SingleChildScrollView(
                    padding: const EdgeInsets.only(left: 10, right: 10),
                    physics: const AlwaysScrollableScrollPhysics(),
                    child: _prepareShopItem(widget.data)))
          ]),
        ));
  }

@override
  void initState() {
    super.initState();
    Future.delayed(const Duration(milliseconds: 500), () {
      _insertHeaderItem();
    });
  }

2. 我可以使用堆栈并从顶部添加修复填充。 flutter 中所有设备（IOS、Android）上的 appBar 高度相同吗？

3. 当滚动 appBar 阴影位于项目下方时，在我的 appBar 和 SingleChildScrollView 之间。

我已经尝试了所有我能找到的方法

Answer 1

即使有不同大小的 AppBar 您可以使用 stack 将 SingleChildScrollView 的顶部链接到容器的位置

1 获取 SingleChildScrollView 的顶部：

GlobalKey key = GlobalKey(); // declare a global key

2

SingleChildScrollView(key:GlobalKey)

3 登顶

RenderBox box = key.currentContext.findRenderObject() as RenderBox; Offset position = box.localToGlobal(Offset.zero); //this is global position double y = position.dy;

4 使用

Positioned(top:  )

将此顶部作为容器的顶部