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

Question

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

我正在用具有飞溅颜色效果的

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,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),

Answer 1

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

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

Answer 2

墨水池里必须有一个onTap：否则即使用材料包裹后也不会出现飞溅

Answer 3

InkWell

小部件必须有一个

Material

小部件作为祖先。

Material

小部件是实际绘制墨水反应的地方。这符合材料设计前提，其中材料实际上是通过扩散墨水对触摸做出反应。

墨水飞溅不可见！

如果有不透明的图形，例如在 Material 小部件和 InkWell 小部件之间使用

Container, Image, or DecoratedBox

绘制，则飞溅将不可见，因为它将位于不透明图形下方。这是因为墨水飞溅会绘制在底层材质本身上，就好像墨水在材质内部扩散一样。

Ink 小部件可以用作

Image, Container, or DecoratedBox

的替代品，以确保图像或装饰也可以在材质本身的墨水下方进行绘制。

按照上面的描述编辑你的小部件

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

Answer 4

材质（ 孩子：墨水井（ 点击: () { print("轻拍了我"); }, splashColor: Colors.grey,....此方法对我有用，对于透明容器，我在材质本身中指定颜色为透明： 材料（ 颜色: 颜色.透明, 孩子：墨水井（ 点按：点按， 飞溅颜色： TransactionColorPalatte.textNaturalWhite.withOpacity(0.2), 孩子：容器（.....

任何人都可以解释一下如何为背景中带有渐变颜色的容器提供飞溅效果吗