Flutter 开发中的一些 Tips

InkWell有的叫溅墨效果，有的叫水波纹效果。使用场景是给一些无点击事件的部件添加点击事件时使用(也支持长按、双击等事件)，同时你也可以去修改它的颜色和形状。

InkWell( 
  borderRadius: BorderRadius.circular(8.0), // 圆角 
  splashColor: Colors.transparent, // 溅墨色（波纹色） 
  highlightColor: Colors.transparent, // 点击时的背景色（高亮色） 
  onTap: () {},// 点击事件 
  child: Container(), 
); 

不过有时你会发现并不是包一层InkWell就一定会有溅墨效果。主要原因是溅墨效果是在一个背景效果，并不是覆盖的前景效果。所以InkWell中的child一旦有设置背景图或背景色，那么就会遮住这个溅墨效果。如果你需要这个溅墨效果，有两种方式实现。

(1)包一层 Material，将背景色设置在 Material中的color里。

Material( 
  color: Colors.white, 
  child: InkWell(), 
) 

(2)使用Stack布局，将InkWell放置在上层。这种适用于给图片添加点击效果，比如Banner图的点击。

Stack( 
            children: [ 
              Positioned.fill( 
                child: Image(), 
              ), 
              Positioned.fill( 
                child: Material( 
                  color: Colors.transparent, 
                  child: InkWell( 
                    splashColor: Color(0X40FFFFFF), 
                    highlightColor: Colors.transparent, 
                    onTap: () {}, 
                  ), 
                ), 
              ) 
            ], 
          ) 

8.保持页面状态

比如点击导航栏来回切换页面，默认情况下会丢失原页面状态，也就是每次切换都会重新初始化页面。这种情况解决方法就是PageView与BottomNavigationBar结合使用，同时子页面State中继承AutomaticKeepAliveClientMixin并重写wantKeepAlive为true。代码大致如下：

class _TestState extends State with AutomaticKeepAliveClientMixin{ 
 
  @override 
  Widget build(BuildContext context) { 
    super.build(context); 
    return Container(); 
  } 
   
  @override 
  bool get wantKeepAlive => true; 
} 

9.依赖版本问题

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!