flutter 响应事件监听器交互之手势识别

最新推荐文章于 2025-07-21 22:02:04 发布

原创最新推荐文章于 2025-07-21 22:02:04 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

flutter 专栏收录该内容

220 篇文章

订阅专栏

这篇博客介绍了Flutter中实现用户交互的手势识别方法，包括使用Listener、MouseRegion和GestureDetector。示例代码展示了如何通过GestureDetector实现点击事件，改变组件颜色和状态，为开发者提供了直观的手势响应实现方式。

flutter 交互之手势识别主要有三种：监听器 Listener,鼠标事件 MouseRegion,手势识别 GestureDetector。

GestureDetector

Container(
  alignment: FractionalOffset.center,
  color: Colors.white,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Icon(
          Icons.lightbulb_outline,
          color: _lights ? Colors.yellow.shade600 : Colors.black,
          size: 60,
        ),
      ),
      GestureDetector(
        onTap: () {
          setState(() {
            _lights = true;
          });
        },
        child: Container(
          color: Colors.yellow.shade600,
          padding: const EdgeInsets.all(8),
          child: const Text('TURN LIGHTS ON'),
        ),
      ),
    ],
  ),
)

Container(
  color: _color,
  height: 200.0,
  width: 200.0,
  child: GestureDetector(
    onTap: () {
      setState(() {
        _color = Colors.yellow;
      });
    },
  ),
)