Flutter InkWell飞溅强度-如何使其在整个应用程序中更加可见?

gijlo24d  于 2022-12-27  发布在  Flutter
关注(0)|答案(2)|浏览(125)

在我的flutter应用程序中,当我点击一个按钮(或者任何用InkWell装饰的东西)时,飞溅/涟漪的效果非常温和,几乎看不见(它就在那里,没有被覆盖,只是非常温和,太微妙了)。
当我使用其他应用程序(例如谷歌的Gmail应用程序)时,每次我点击某个东西,飞溅/涟漪效应非常强烈,给用户带来了很好的视觉效果。

    • 问题:**

如何在Flutter应用中增强飞溅/涟漪效果?

q0qdq0h2

q0qdq0h21#

InkWell小部件让您可以控制splashColorhighlightColor,您只需按如下方式分配它们:

InkWell(
 splashColor: Colors.red, 
 highlightColor: Colors.green,
 onTap: () {},
 child: `yourChild()`,
 ),

这将给予它一个飞溅(墨水效果)红色,当它突出显示时,它将显示绿色。

w8ntj3qf

w8ntj3qf2#

专业提示:为InkWell构建 Package 并在整个应用程序中使用

class MyInkWell extends StatelessWidget {
  const MyInkWell({Key? key, this.child, this.onTap}) : super(key: key);

  final VoidCallback? onTap;
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      // customized you want
      // splashColor: ,
      // focusColor: ,
      // hoverColor: ,
      // highlightColor: ,
      // overlayColor: ,
      // radius: ,
      onTap: onTap,
      child: child,
    );
  }
}

并使用您自己定制的墨水池

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
            child: MyInkWell(
                onTap: () {
                  // on tap callback
                },
                child: const Icon(Icons.abc))),
      ),
    );
  }
}

问候

相关问题