Flutter- 涟漪效应

在Flutter中，“rippling effect”（涟漪效应）是一个十分受欢迎的UI特效，它能够在用户点击或触摸组件时，以动画形式呈现出类似于水波纹般的扩散效果，极大的提升了界面的交互体验。

实现

要使用Flutter中的“涟漪效应”，只需要在需要添加该特效的组件外层包裹一个InkWell或InkResponse组件即可。这两个组件都继承自InkSplash，从而能够实现“涟漪效应”的特效。

当组件是InkWell时：

InkWell(
  onTap: (){ // 点击事件处理函数 },
  child: Container(), // 容器内的子组件
)

当组件是InkResponse时：

InkResponse(
  onTap: (){ // 点击事件处理函数 },
  child: Container(), // 容器内的子组件
)

自定义

Flutter中的“涟漪效应”并非是固定的特效，你可以通过一些参数来自定义该效果。

1. splashColor

splashColor是点击或触摸组件时，涟漪颜色变化的动画时间。该属性是一个Color，默认值为当前主题的高亮颜色。我们可以通过修改他来改变点击 触摸区域的涟漪颜色。

InkWell(
  onTap: (){ // 点击事件处理函数 },
  splashColor: Colors.blue, // 自定义涟漪的颜色
  child: Container(), // 容器内的子组件
)

2. radius

radius是涟漪效应的半径长度。该属性是一个double类型，默认值为null，表示没有半径限制。

InkWell(
  onTap: (){ // 点击事件处理函数 },
  radius: 50.0, // 涟漪半径，单位为逻辑像素
  child: Container(), // 容器内的子组件
)

3. borderRadius

borderRadius是涟漪效应的边界圆角半径。该属性是一个BorderRadius类型，默认值为BorderRadius.zero，表示没有圆角。

InkWell(
  onTap: (){ // 点击事件处理函数 },
  borderRadius: BorderRadius.circular(10.0), // 涟漪边界圆角半径
  child: Container(), // 容器内的子组件
)

4. enableFeedback

enableFeedback是一个bool类型的值，表示是否允许在涟漪结束后给用户提供触觉反馈。该属性默认值为true。

InkWell(
  onTap: (){ // 点击事件处理函数 },
  enableFeedback: false, // 禁用触觉反馈
  child: Container(), // 容器内的子组件
)

总结

Flutter的“涟漪效应”是一种简单实用，而且灵活可被自定义的UI特效，在Flutter界面设计中应用广泛。通过上述方式，我们可以很快地将他 apply 到自己的UI设计中。