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

Question

我尝试使用 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")),
          ],
        ),
      ),
    );
  }
}

标签： flutteruser-interfaceflutter-layout

Answer 1

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