时间戳

首页 > 解决方案 > 如何在 Flutter 中将 Container 上的涟漪效果显示为 IconButton 子项？

flutter - 如何在 Flutter 中将 Container 上的涟漪效果显示为 IconButton 子项？

问题描述

标准 IconButton 不会对孩子产生任何连锁反应：

IconButton(
 icon: Container(color: Colors.red,),
 onPressed: () {},
)

所以我尝试用 Stack 修复它：

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

    @override
    Widget build(BuildContext context) {
      return Container(
        height: 100,
        width: 100,
        child: Stack(
          fit: StackFit.loose,
          children: [
            Positioned.fill(
              child: Container(
                width: 40,
                height: 40,
                color: Colors.deepPurple, 
              ),
            ),
            Positioned.fill(
              child: Material(
                type: MaterialType.transparency,
                shape: const CircleBorder(),
                child: IconButton(
                  splashRadius: 50,
                  icon: Container(), 
                  onPressed: () {
                  },
                ),
              ),
            )
          ],
        ),
      );
    }
  }

但是这个小部件需要定义容器的大小，当我定义该大小时，我无法在该容器之外显示涟漪效应。我愿意接受建议。

标签： flutterflutter-layout

解决方案

Container用小部件替换您的Ink。

IconButton(
  onPressed: () {},
  icon: Ink(color: Colors.red),
)

墨水：

用于在 Material 小部件上绘制图像和其他装饰的便捷小部件，以便 InkWell 和 InkResponse 飞溅将呈现在它们之上。

推荐阅读