添加 Navigator.push Flutter 时不显示 InkWell 飞溅颜色效果答案

【问题标题】：InkWell splash color effect not showing when adding Navigator.push Flutter添加 Navigator.push Flutter 时不显示 InkWell 飞溅颜色效果
【发布时间】：2020-10-21 09:32:43
【问题描述】：

我正在尝试实现一个按钮，当它被点击时调用另一个页面。

我正在使用具有初始颜色效果的 inkWell 小部件和 onTap (){} 包装一个容器。该按钮显示了 onTap (){} 为空的初始颜色效果，但是当我添加 Navigator.push.. 以调用另一个页面时，初始颜色效果消失了。

知道如何解决这个问题吗？

这是代码

            Padding(
              padding: const EdgeInsets.only(top: 11),
              child: Material(
                color: Colors.white,
                child: InkWell(
                  splashColor: Colors.grey,
                  onTap: () {
                    Navigator.push(
                      context,
                      PageTransition(
                        type: PageTransitionType.downToUp,
                        duration: Duration(milliseconds: 200),
                        child: ProfileProduct(
                          imageUrl: widget.reviews.imageUrl,
                          cost: widget.reviews.cost,
                          name: widget.reviews.userName,
                          address: widget.reviews.address,
                          brand: widget.reviews.brand,
                          productName: widget.reviews.productName,
                          userImage: widget.reviews.userImage,
                          currentUserId: widget.reviews.authorId,
                          cSrateStars: widget.reviews.cSrateStars,
                          easyPurchaseRateStars:
                              widget.reviews.easyPurchaseRateStars,
                          envioDiasRateStars: widget.reviews.envioDiasRateStars,
                          totalRate: widget.reviews.totalRate,
                          recomendation: widget.reviews.recomendation,
                          businessName: widget.reviews.businessName,
                          fecha: widget.reviews.timestamp,
                          videoLink: widget.reviews.videoLink,
                        ),
                      ),
                    );
                  },
                  child: Container(
//                  margin: EdgeInsets.only(top: 10),
                    height: 280,
                    width: 190,
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(left: 10, top: 2),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              CircleAvatar(
                                radius: 12.0,
                                backgroundColor: Colors.grey,
                                backgroundImage: widget
                                        .reviews.userImage.isEmpty
                                    ? AssetImage(
                                        'assets/images/user_placeholder.jpg')
                                    : CachedNetworkImageProvider(
                                        widget.reviews.userImage),
                              ),
                              SizedBox(width: 0.0),
                              Text(
                                widget.reviews.userName,
                                style: TextStyle(
                                    fontSize: 15, fontWeight: FontWeight.w700),
                              ),
                              IconButton(
//                            alignment: Alignment.topLeft,
                                icon: _isLiked
                                    ? Icon(
                                        Icons.favorite,
                                        color: Colors.red,
                                      )
                                    : Icon(Icons.favorite_border),
                                iconSize: 15.0,
                                onPressed: _likePost,
                              ),
                            ],
                          ),
                        ),
                        AutoSizeText(
                          widget.reviews.productName,
                          maxLines: 4,
                          style: TextStyle(color: Colors.blue, fontSize: 20),
                        ),
                        SizedBox(height: 3.0),
                        RatingStars(widget: widget),
                        SizedBox(height: 8.0),
                        AutoSizeText(
                          '$costos',
                          maxLines: 4,
                          style: TextStyle(color: Colors.grey),
                        ),
                        SizedBox(height: 3.0),
                        Padding(
                          padding: const EdgeInsets.only(left: 15, right: 15),
                          child: AutoSizeText(
                            widget.reviews.comments,
                            maxLines: 3,
                            style: TextStyle(color: Colors.grey),
                          ),
                        ),
//                    SizedBox(height: 3.0),
                        AutoSizeText(
                          'See More...',
                          maxLines: 4,
                          style: TextStyle(color: Colors.blue),
                        ),
                        Text(
                          '${_likeCount.toString()} likes',
                          style: TextStyle(
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),

【问题讨论】：

标签： flutter material-design

【解决方案1】：

我遇到了同样的问题，并在 Inkwell 飞溅显示之前实现了“NewPage()”加载。我做了一个小的hack，将 Navigator.push 延迟了 300 毫秒。它似乎有效。

InkWell(
        splashColor: Colors.grey,
        onTap: () {
          Future.delayed(const Duration(milliseconds: 300), () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => NextPage()));
          });
        },
child:Somewidget,
)

【讨论】：

【解决方案2】：

InkWell 小部件必须有一个 Material 小部件作为祖先。 Material 小部件是实际绘制墨水反应的地方。这符合材料设计前提，其中材料实际上是通过涂抹墨水对触摸做出反应。

墨迹不可见！

如果有不透明的图形，例如在 Material 小部件和 InkWell 小部件之间使用Container, Image, or DecoratedBox 进行绘制，然后飞溅将不可见，因为它将位于不透明图形下方。这是因为墨水溅到了底层材质本身，就好像墨水在材质内部扩散一样。

Ink 小部件可用作Image, Container, or DecoratedBox 的替代品，以确保图像或装饰也可以在材质本身中绘制，位于墨迹下方。

根据上面的描述编辑你的小部件

Material(
          child: InkWell(
        onTap: () {
          print("tapped me");
        },
        splashColor: Colors.grey,....

【讨论】：

实际上，根据我上面的代码，我确实有 Material 作为祖先，并且启动画面是可见的，没有问题，上面提到的问题是当我在 on tap 中添加 navigator.push （调用另一个页面）时，当我这样做时，水花就会消失。
您的解决方案不能解决我的问题，实际上，我确实按照上面的代码将 Material 作为祖先，并且飞溅是可见的，没有问题，上面提到的问题是当我添加 navigator.push (在 onTap 中调用另一个页面），当我这样做时，飞溅就会消失。简而言之，只要导航器不在 onTap 内，就可以看到飞溅效果，这就是问题所在，无论 onTap 内有什么，我都希望飞溅效果可见，有什么解决方案吗？
另外，如果您检查我的代码，我没有在容器中添加任何可能覆盖飞溅效果的颜色，材料是白色的，这就是为什么飞溅可见我想要，但问题很奇怪，因为我不知道 onTap 中的 navigator.push 与飞溅效果有什么关系
好的，我一会儿再看
@AlfonsoAngulo 你解决了这个问题吗？我也面临同样的情况。

【解决方案3】：

你必须有一个onTap：在墨水池中，否则即使用材料包裹它也不会出现飞溅

【讨论】：