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

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

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

Answer 2

<script type="text/javascript" src="/static/js/core.js"></script> <script type="text/javascript" src="/static/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script type="text/javascript" src="/static/js/portfolio.js"></script>小部件必须具有InkWell小部件作为祖先。 Material小部件是实际绘制墨水反应的位置。这符合材料设计的前提，其中材料是通过散布墨水对触摸产生实际反应的材料。

看不到墨水飞溅！

如果图形不透明，例如使用Material在“材质”小部件和“ InkWell”小部件之间进行绘制，则将看不到飞溅，因为它将在不透明的图形下方。这是因为墨水飞溅会在基础材料本身上绘制，就像墨水在材料内部散布一样。

“油墨”小部件可以用作Container, Image, or DecoratedBox的替代品，以确保图像或装饰物也可以在油墨下方的材料本身中绘制。

按照上述说明编辑窗口小部件

Image, Container, or DecoratedBox

Answer 3

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

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

3 个答案: