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

如何解决通过Flutter中的容器传递滚动手势

我在使用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),Color.fromARGB(0,Color.fromARGB(50,0) ],stops: [ 0.05,0.25,0.75,0.95 ]
                  )
                )
              )
            ]
          )
        ),),);

解决方法

您可以使用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,),]
          )

,

似乎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)
      )
    )
  ]
)

还有附带代码笔的代码

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.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
}