如何使用滚动视图和手势检测在一个小部件页面在Flutter？

rhfm7lfc 于 2023-05-08 发布在 Flutter

关注(0)|答案(2)|浏览(252)

我遇到了一个问题，滚动我的Flutter应用程序。我已经创建了一个小部件，并将SingleChildScrollView作为树中小部件的顶部。然后我添加了GestureDetector来操纵我的Map。屏幕的其余部分将包含一个简单的列或文本（但它们很多，所以我需要滚动）。这是一个简单的布局，我想实现Desired layout。
伪代码：

SingleChildScrollView(
  child: Column(
    children:[
      ScreenTitle("Title"),
      GestureDetector(child: Map()),
      Text("Lorem ipsum"),
      Text("Lorem ipsum"),
      ...
    ]
  )
);

问题出在滚动优先级上。当我水平点击Map小部件时，一切正常，但如果我垂直点击，SingleChildScrollView会捕捉这个手势并滚动整个页面。我想捕捉我的Map的所有手势，只有当用户点击其他地方，它应该被委派给SingleChildScrollView。
当然没有SingleChildScrollView，我的GestureDetect工作正常，但...文本在可见区域的后面。
我想捕捉我的Map小部件上的每个手势，并委托给SingleChildScrollView仅事件而不是来自手势。我试图删除SCSV并将其替换为ListView（同样的问题）。

flutter

来源：https://stackoverflow.com/questions/76180570/how-to-use-scroll-view-and-gesture-detect-on-the-one-widget-page-in-flutter

2条答案

按热度按时间

xriantvc1#

如果你想让你的map独立于你的SingleChildScrollView，那么就把它从SingleChildScrollView中提取出来，像这样：

Column(
  children: <Widget>[
    GestureDetector(
      child: Map(),
    ),
    Expanded(
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[],
        )
      ),
    ),
  ],
)

用Expanded Package SingleChildScrollView很重要，因为否则你会得到渲染错误。

赞(0）回复(0）举报 2023-05-08

mwkjh3gx2#

要实现所需的布局，可以将Column小部件 Package 在ListView小部件中。ListView允许您滚动列的子列，GestureDetector允许您操作Map。
下面是如何实现所需布局的示例：

SingleChildScrollView(
  child: ListView(
    physics: NeverScrollableScrollPhysics(), // disable scrolling of the ListView
    shrinkWrap: true, // allow the ListView to take up only the necessary space
    children: [
      ScreenTitle("Title"),
      GestureDetector(
        child: Map(),
        behavior: HitTestBehavior.opaque, // make sure the gesture detector is opaque to avoid conflicts with scrolling
      ),
      Text("Lorem ipsum"),
      Text("Lorem ipsum"),
      // more text widgets
    ],
  ),
);

赞(0）回复(0）举报 2023-05-08

我来回答

如何使用滚动视图和手势检测在一个小部件页面在Flutter？

2条答案

相关问题

热门标签

最新问答