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

Question

我在使用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 ]
)
)
)
]
)
),
),
);

Answer 1

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
}

Answer 2

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

]
)