通过 Flutter 中的容器传递滚动手势答案

【问题标题】：Pass scroll gestures through container in Flutter通过 Flutter 中的容器传递滚动手势
【发布时间】：2020-08-27 03:36:25
【问题描述】：

我在使用 PageView 构建的屏幕上有一个较小的元素，因为我需要对列表中的每个项目进行对齐效果。但这意味着边缘将是齐平的，没有视觉指示 PageView 元素是可滚动的。我尝试将 PageView 放在堆栈中，顶部有一个容器（如叠加层），该容器具有线性渐变以“遮蔽”侧面以使元素看起来圆润，但这会阻止滚动手势到达 PageView。

我的问题是：是否有一个我找不到的小部件允许滚动手势通过它，同时在视觉上出现在其他元素之上？我知道我可以在其上绘制小于 PageView 的元素，但我只是想知道其他人是否成功地完成了类似的操作。

编辑：这是工作代码的简化版本。我无法滑动到下一个页面视图。

    return Scaffold(
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(35.0),
          child: Stack(
            children: [
              PageView(
                children: [
                  Container(color: Colors.blue[200]),
                  Container(color: Colors.red[200]),
                  Container(color: Colors.deepPurple[200])
                ]
              ),
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                    colors: [ Color.fromARGB(50, 0, 0, 0), Color.fromARGB(0, 0, 0, 0), Color.fromARGB(0, 0, 0, 0), Color.fromARGB(50, 0, 0, 0) ],
                    stops: [ 0.05, 0.25, 0.75, 0.95 ]
                  )
                )
              )
            ]
          )
        ),
      ),
    );

【问题讨论】：

这不应该发生只要没有输入期望小部件超过浏览量你应该很好去如果有那么你应该检查它的hittestbehavior属性，请发布工作代码
@Yadu 该元素的树中没有任何其他手势检测器。

标签： flutter dart mobile

【解决方案1】：

您可以使用 PageIndicatorWidget。像这样的东西： var pageController = PageController();

          Stack(
            children: [
              PageView(
                controller: pageController,
                children: [
                  Container(color: Colors.blue[200]),
                  Container(color: Colors.red[200]),
                  Container(color: Colors.deepPurple[200])
                ]
              ),
          PageIndicator(
              layout: PageIndicatorLayout.WARM,
              size: 10.0,
              controller: pageController,
              space: 5.0,
              count: 3,
              color: Colors.green,
              activeColor: Colors.gray,
            ),
              
            ]
          )

【讨论】：

【解决方案2】：

似乎 Containers 阻止了滚动输入，所以我决定按照 Pedro R. 的建议走另一条路。我在 PageView 的底部创建了一个页面指示器，指示用户当前在哪个页面上以及总共有多少页面。这是我为展示效果而制作的CodePen。

编辑和最佳答案：所以我很快就找到了我正在寻找的东西。这是一个名为IgnorePointer 的类，它的工作方式类似于下面的代码示例。这将允许您在PageView 上滑动。尝试删除IgnorePointer，您的滑动就会被阻止。

Stack(
  children: <Widget>[
    PageView(
      children: <Widget>[
        Container(color: Colors.deepPurple[300]),
        Container(color: Colors.blue[300]
      ]
    ),
    IgnorePointer(
      child: Container(
        color: Color.fromARGB(100, 100, 100, 100)
      )
    )
  ]
)

以及与代码笔一起使用的代码

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  MyWidget({Key key}): super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(35.0),
          child: PageIndicator()
        ),
      ),
    );
  }
}

class PageIndicator extends StatefulWidget {
  PageIndicator({Key key}): super(key: key);
  
  @override
  _PageIndicatorState createState() => _PageIndicatorState();
}

class _PageIndicatorState extends State<PageIndicator> {
  int _pageNum;
  PageController _controller;
  
  @override
  void initState() {
    super.initState();
    _pageNum = 0;
    _controller = PageController(initialPage: 0);
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        PageView(
          controller: _controller,
          onPageChanged: (page) {
            setState(() {
              _pageNum = page;
            });
          },
          children: [
            Container(color: Colors.blue[200]),
            Container(color: Colors.red[200]),
            Container(color: Colors.deepPurple[200])
          ]
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            width: 200,
            height: 80,
            child: Center(
              child: Text("${_pageNum + 1} / 3", style: TextStyle(fontSize: 25.0))
            )
          )
        )
      ]
    );
  }// end build
}

【讨论】：