Column子PageView全屏交互

Question

我正在尝试创建一个屏幕，如下所示：

底部是 PageView.builder。我希望它可以通过整个屏幕进行交互。

我想到的第一件事是将它们包装在一个堆栈中，在顶部创建一个不可见的 PageView，并同步底部和不可见（顶部）PageView 的控制器。但是，在这种情况下，按钮不会接收输入。

PS：用 HitTestBehavior.translucent 监听器包裹顶部 PageView 不起作用。我认为 PageView 不允许点击事件传播。

我怎样才能接近这个屏幕？

class Test extends StatelessWidget {
  Test({Key? key}) : super(key: key);
  final pageController = PageController();
  final infoPages = [
    Container(
      color: Colors.blue[200],
      child: Text("info 1"),
    ),
    Container(
      color: Colors.blue[400],
      child: Text("info 2"),
    ),
    Container(
      color: Colors.blue[600],
      child: Text("info 3"),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
            flex: 2,
            child: Container(
              color: Colors.grey,
              child: Text("this is a static image"),
            )),
        Expanded(
          child: TextButton(
            onPressed: () {
              print("button pressed");
            },
            child: const Text("This is a static button"),
          ),
        ),
        Expanded(
          flex: 2,
          child: PageView.builder(
            controller: pageController,
            itemCount: infoPages.length,
            itemBuilder: ((context, index) {
              return infoPages[index];
            }),
          ),
        ),
      ],
    );
  }
}

Answer 1

亲爱的平行宇宙的我；
我通过用堆栈包装它、禁用 PageView 交互并使用 GestureDetector 控制它来解决它。

class Test extends StatefulWidget {
  Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  final pageController = PageController();

  final infoPages = [
    Container(
      color: Colors.blue[200],
      child: Text("info 1"),
    ),
    Container(
      color: Colors.blue[400],
      child: Text("info 2"),
    ),
    Container(
      color: Colors.blue[600],
      child: Text("info 3"),
    ),
  ];

  late double offset;
  late double start;
  bool snap = true;

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Column(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.grey,
              child: Text("this is a static image"),
            ),
          ),
          Expanded(
            child: TextButton(
              onPressed: () {
                print("button pressed");
              },
              child: const Text("This is a static button"),
            ),
          ),
          Expanded(
            flex: 2,
            child: PageView.builder(
              pageSnapping: snap,
              physics: const NeverScrollableScrollPhysics(),
              controller: pageController,
              itemCount: infoPages.length,
              itemBuilder: ((context, index) {
                return infoPages[index];
              }),
            ),
          ),
        ],
      ),
      GestureDetector(
        onHorizontalDragStart: (details) {
          offset = pageController.offset;
          start = details.globalPosition.dx;
          setState(() {
            snap = false;
          });
        },
        onHorizontalDragUpdate: (details) {
          final dx = details.globalPosition.dx - start;
          double temp = offset - dx;
          pageController.jumpTo(temp);
        },
        onHorizontalDragEnd: (details) {
          setState(() {
            snap = true;
          });
        },
      )
    ]);
  }
}