Flutter 自定义水波纹的效果

在 MaterialApp Widget 下的 theme 属性下可以设置。

ThemeData 的属性:
highlightColor 水波纹的背景颜色

splashColor 水波纹的颜色

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
          home: Home(),
          theme: ThemeData(
            primaryColor: Colors.orange,
            highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
            splashColor: Colors.white70,
          ),
        );
    }
}
也可以写一个局部的来设置某个组件或者Inkwell的点击水波纹,

示例:

new Theme(
                      data: new ThemeData(
                        primaryColor: Colors.orange,
                        highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
                        splashColor: Colors.white70,
                      ),
                      child: new InkWell(
                        child: new Image.asset(
                            'assets/images/money/tixian_btn.webp'),
                        onTap: () => routePush(new AlipayBindPage()),
                      ),
                    )

这是我放的一张图片,但是图片有一部分是透明的,放在白色背景上回呈现出水波纹,显示出界面和代码的水平不行,为了不让用户看到,直接去除水波纹,毫无违和感。



本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《Flutter 自定义水波纹的效果
分享到:更多

相关推荐



Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


关注公众号“Flutter前线”,各种Flutter项目实战经验技巧,干活知识,Flutter面试题答案,等你来领取。


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)