Question

我有一个Flutter应用，打算在地图上显示固定的优惠。在此地图的上，将是一个可滚动的视图，它将以“文本”形式显示要约（基本上是固定在地图上的要约列表）。

我还希望滚动视图在开始时仅覆盖大约一半的屏幕，但是可以向上滚动以覆盖整个地图视图。这就是为什么我要填充。

一切正常，但是ScrollView阻止我移动和缩放地图吗？

setPrice = (price) => {
    this.setState(() => ({ stat1: ({100: "a", 1000: "b", 2000: "c"})[price] }))
}

有什么想法吗？

图1：以下建议解决方案的结果：

图像2：这就是我想要的，视图在其中向上滑动并隐藏了地图：

Answer 1

诀窍是实际上将Map放在Stack的顶部，以便它始终对手势做出反应，并在滚动ScrollView时更改布局，以便在视觉上将ScrollView放在Map的顶部。试试下面的代码：

在小部件状态下初始化ScrollController：

final ScrollController scrollController = ScrollController();

在scrollController中的initState中添加一个侦听器：

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

然后是build：

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

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

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

（是的，我知道我最初建议使用带有Slivers的CustomScrollView，但是这种方法实际上似乎更容易，更快捷-也就是说，我不确定每次{{1} }滚动-可能需要在低端设备上进行测试）

堆栈中的手势被阻止

1 个答案: