将点击事件传递给 Stack 后面的孩子

Question

在观看了有关在 Flutter 中创建自定义 PageView 的教程视频后，我遇到了一个问题。 为了实现自定义 PageView 的页面位置，我使用了一组项目，这些项目根据放置在 Stack.fill() 中 Stack.fill() 中的每个其他元素上方的 PageView 向左/向右滑动。

代码示例如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Test')),
      body: Container(
        height: 200.0,
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.blueGrey,
              width: double.infinity,
              height: double.infinity,
              child: Material(
                type: MaterialType.transparency,
                child: InkWell(
                  onTap: () {
                    print('InkWell tapped');
                  },
                ),
              ),
            ),
            Positioned.fill(
              child: PageView.builder(
                itemBuilder: (context, index) {
                  return Container(
                    child: Center(
                      child: Text(
                        '$index',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 25.0,
                        ),
                      ),
                    ),
                  );
                },
                itemCount: 4,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

问题是我想在 PageView 后面的 InkWell 上触发 Tap 事件，同时仍然能够滑动 PageView。

是否可以将点击事件传递给 PageView 后面的元素？ 谢谢。

---

编辑：

由于您不应该在 Flutter 中扩展小部件，我刚刚制作了一个使用 HitTestBehavior.translucent 而不是 HitTestBehavior.opaque 的 Scrollable 类的副本。之后，您使用这个新的 Scrollable 创建一个 PageView 的副本。

通过这样的修改 - PageView 后面的孩子开始接收手势。

Answer 1

解决方案：

由于您不应该在 Flutter 中扩展小部件，我刚刚制作了一个使用 HitTestBehavior.translucent 而不是 HitTestBehavior.opaque 的 Scrollable 类的副本。之后，您使用这个新的 Scrollable 创建一个 PageView 的副本。

通过这样的修改 - PageView 后面的孩子开始接收手势。

Answer 2

这个是不用栈的，

   Scaffold(
            appBar: AppBar(title: Text('Test')),
            body: Container(
              color: Colors.red,
              height: 200.0,
              child: InkWell(
                onTap: () {
                  print('InkWell tapped');
                },
                child: PageView.builder(
                  itemCount: 4,
                  itemBuilder: (context, index) {
                    return Container(
                      child: Center(
                        child: Text(
                          '$index',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 25.0,
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
          ),