Flutter – InkWell 小部件

Flutter 中的 InkWell 小部件是一个具有点击效果的小部件，可以让用户知道他们正在与某个小部件进行交互。它们通常用作按钮或链接的替代方法，以为用户提供更好的互动体验。

在本文中，我们将学习如何使用 InkWell 小部件来实现以上效果。

示例

这是一个简单的 InkWell 示例，当用户点击容器时会打印一条消息：

class MyInkWell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        print('InkWell 被点击了！');
      },
      child: Container(
        height: 50,
        width: 150,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Center(
          child: Text(
            '点击我',
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
            ),
          ),
        ),
      ),
    );
  }
}

属性

onTap

当 InkWell 被点击时调用的函数。

InkWell(
  onTap: () {
    print('被点击了！');
  },
  // ...
)

borderRadius

InkWell 边框的圆角程度。

InkWell(
  borderRadius: BorderRadius.circular(10),
  // ...
)

splashColor

当 InkWell 被点击时，溅射的颜色。

InkWell(
  splashColor: Colors.red,
  // ...
)

highlightColor

当 InkWell 被长按时，高亮的颜色。

InkWell(
  highlightColor: Colors.green,
  // ...
)

结论

InkWell 小部件是一个非常有用的小部件，可以为 Flutter 应用程序增加可交互性。使用 InkWell 可以轻松地为小部件添加点击效果并处理用户操作。