如何制作一个同样会产生涟漪的图像按钮？答案

【问题标题】：How do make a image button that also ripples?如何制作一个同样会产生涟漪的图像按钮？
【发布时间】：2021-10-08 09:21:19
【问题描述】：

我尝试使用 Stack 和 InkWell，但代码变得更长而且似乎有问题。也不会产生涟漪。

这就是我所拥有的：

这是我想要的，但我需要将文本放在中心（添加填充或中心不起作用）。波纹也不起作用。

这是代码，但我宁愿从头开始而不是修复我的代码。我不认为我的方式是最好的方式。

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

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        child: GridView.count(
          crossAxisCount: 1,
          childAspectRatio: 3,
          children: [
            InkWell(
              onTap: () {
                print("tapped");
              },
              child: Stack(
                children: <Widget>[
                  Container(
                    width: double.infinity,
                    height: 180,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('images/background/1.jpg'),
                        fit: BoxFit.cover)
                      ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Text(
                          "First",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 30,
                            fontWeight: FontWeight.bold),
                          ),
                          SizedBox(
                            height: 70,
                          ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            ElevatedButton(onPressed: () {}, child: Text("Hello")),
            ElevatedButton(onPressed: () {}, child: Text("Hello")),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

你希望这种类型的图像是卡片的顶部encrypted-tbn0.gstatic.com/…

标签： flutter user-interface flutter-layout

【解决方案1】：

这就是你要找的。p>

 Ink.image(
              image: AssetImage(
                "assets/ocen.jpg",
              ),
              fit: BoxFit.cover,
              child: InkWell(
                onTap: () {},
                child: Center(
                  child: Text(
                    "First",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 30,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),

【讨论】：

【解决方案2】：

你的问题不清楚。但是从您提到的内容来看，我认为您应该阅读更多有关堆栈如何工作的信息。如果您想通过仅使用墨水池为该图像添加波纹效果，则墨水池应该是堆栈的最后一个子级（子列表中的最后一个）图像将位于底部，墨水池位于顶部，对于涟漪效果使用墨水瓶的父级材质。

【讨论】：