flutter - Stack 中的手势被阻止

Question

我有一个 flutter 应用程序，我打算在其中显示 map 上的固定优惠。在这张 map 上，将是一个可滚动的 View ，它将以“文本”形式显示报价(基本上是固定在 map 上的报价列表)。

我还希望 ScrollView 在开始时只覆盖大约一半的屏幕，但它可以向上滚动以覆盖整个 map View 。这就是为什么我有填充。

一切都按预期工作，但我的 ScrollView 阻止我移动和缩放 map ？

 Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: globals.themeColor4,
          title: Text('MY APP'),
        ),
        body: Stack(
          children: <Widget>[
            Container(
              child: _mapInitialized
                  ? _map
                  : Container(
                      child: Center(
                        child: Text("Loading.."),
                      ),
                    ),
            ),

            SingleChildScrollView(
              padding: EdgeInsets.fromLTRB(0, 300, 0, 0),
              child: Container(
                color: Colors.white,
                child: Column(children: _offers),
            ),)
          ],
        ));
  }

有什么想法吗？

图 1:下面建议的解决方案的结果:

图 2:这就是我想要的， View 向上滑动并隐藏 map :

Answer 1

诀窍是让 Map 实际上位于 Stack 的顶部，以便它始终对手势使用react，并在 ScrollView 滚动时更改布局，以便在视觉上 ScrollView 位于 Map 的顶部。试试下面的代码:

在小部件的状态下初始化一个ScrollController:

final ScrollController scrollController = ScrollController();

在initState中为scrollController添加一个监听器:

scrollController.addListener(() {
  setState(() {}); // triggers rebuild with the new Container height
});

然后构建:

return Stack(
  children: <Widget>[
    SingleChildScrollView( // this is your list
      controller: scrollController,
      padding: const EdgeInsets.only(top: 300),
      child: Column(
        children: List.generate(50, (int index) => Container( // your list items
          height: 50,
          color: index % 2 == 0 ? Colors.orange : Colors.green,
        )),
      ),
    ),
    GestureDetector(
      onTap: () {
        print("TAPPED");
      },
      child: Container(
        height: max(0, 300.0 - (scrollController.hasClients ? scrollController.offset : 0)),
        child: Wrap(
          children: <Widget>[
            Container(
              height: 300, // fixed height for the Map
              child: Column( // this is where your Map would be
                children: List.generate(6, (int index) => Container(
                  height: 50,
                  color: index % 2 == 0 ? Colors.blue : Colors.purple,
                )),
              ),
            ),
          ],
        ),
      ),
    ),
  ],
);

当您滚动 ScrollView 时，Container 从其初始高度缩小到 0，这在视觉上与在顶部滚动的 ScrollView 相同的 map 。 math 包的 max 函数用于防止 Container 的高度低于 0。

Wrap 小部件可防止其子项溢出，尽管其高度固定为 300，父级 Container 的高度可能小于 300。

(是的，我知道我最初建议使用 Slivers 的 CustomScrollView，但这种方法实际上看起来更容易和更快 - 也就是说我不确定每次调用 setState 的性能影响 ScrollView 已滚动 - 可能需要在低端设备上进行测试)