使用 OpenContainer 动画显示 InkWell Ripple？

Question

这里的工作代码：

                  OpenContainer(
                    openBuilder: (context, action) => const SelectedProduct(),
                    closedBuilder: (context, action) => Card(),
                  ),
                  /*Positioned.fill(
                    child: Material(
                        color: Colors.transparent,
                        child: InkWell(
                          onTap: () {
                            context.read<DownloadImages>().currentProduct = i;
                            context.read<DownloadImages>().notifyListeners();
                            //Navigator.pushNamed(context, '/seven');
                          },
                          splashColor: Colors.transparent,
                        )
                    ),
                  ),*/

注释掉的代码就是我想要实现的。忽略我在

onTap

中设置的其他变量，那不是我的重点，但我的重点是当我单击

InkWell

或将其固定到位时显示此

Card

波纹，然后才启动

 openBuilder

。

发生的情况是，当

InkWell

到位时，

InkWell

超越

OpenContainer

构建者，并且只有其

onTap

被使用。例如，我如何忽略 InkWell 的

onTap

，只让它的动画与

OpenContainer

一起工作？

注意：这两个都在

Stack

小部件内。

---

完整的测试代码：

import 'package:flutter/material.dart'
import 'package:animations/animations.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TestPage',
      home: const Products(),
    );
  }
}

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

  @override
  State<Products> createState() => _ProductsState();
}

class _ProductsState extends State<Products> {

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        return Future.value(false);
      },
      child: Scaffold(
        body: Container(
          alignment: Alignment.center,
          child: SingleChildScrollView(
            padding:
            const EdgeInsets.only(top: 20, bottom: 20, left: 15, right: 15),
            child: Column(
            children: [
              Stack(
                children: [
                  OpenContainer(
                    openBuilder: (context, action) => const SelectedProduct(),
                    closedBuilder: (context, action) => Card(
                      child: Text('Test Card')
                    ),
                  ),
                  Positioned.fill(
                    child: Material(
                        color: Colors.transparent,
                        child: InkWell(
                          onTap: () {
                            //Navigator.pushNamed(context, '/seven');
                          },
                          splashColor: Colors.transparent,
                        )
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 10),
            ],
          )
          ),
        ),
      ),
    );
  }
}

Answer 1

小部件优先级，点击事件从下到上。将可点击小部件放在底部，将背景小部件放在顶部。

如果你交换位置，它就会起作用。

Stack(
    children: [
      Positioned.fill(
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: () {
              //Navigator.pushNamed(context, '/seven');
            },
            splashColor: Colors.transparent,
          ),
        ),
      ),
      OpenContainer(
        tappable: true,
        openBuilder: (context, action) => Container(
          color: Colors.green,
          height: 200,
          width: 200,
        ),
        closedBuilder: (context, action) => Card(
          child: Text('Test Card'),
        ),
      ),
    ],
  ),

没有

Stack

Material(
    color: Colors.green,
    child: Ink(
      width: 200,
      height: 200,
      child: InkWell(
        onTap: () {},
        child: Center(
          child: OpenContainer(
            // closedColor: Colors.pink, or card color
            openBuilder: (context, action) =>
                const Text("Open card"),
            closedBuilder: (context, action) =>
                Card(child: Text('Test Card')),
            // ),
          ),
        ),
      ),
    ))

Answer 2

简单！用 InkWell 包裹

closedBuilder

小部件，并使用构建器的

action

参数作为

onTap

函数来手动触发容器打开。另外，将

tappable

参数设置为 false。

示例代码：

OpenContainer(
  tappable: false,
  openBuilder: (context, action) {
    return const Widget2();
  },
  closedBuilder: (context, action) {
    return InkWell(
      onTap: action, // this will open the container
      child: Widget1(),
    );
  },
);

演示视频：