面试题：Flutter中Widget常见的事件处理方式有哪些

Question

在Flutter开发中，阐述Widget常用的事件处理方式，比如处理点击事件、滑动事件等分别使用什么方法或组件，并且举例说明如何在一个自定义Widget中实现点击事件并做出相应反馈。

Answer 1

1. 点击事件

在Flutter中，处理点击事件常用的组件是GestureDetector。它可以检测多种手势，包括点击。示例如下：

class MyCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 这里写点击后的逻辑
        print('Widget被点击了');
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
        child: const Center(
          child: Text('点击我'),
        ),
      ),
    );
  }
}

2. 滑动事件

处理滑动事件也可以使用GestureDetector。其中onPanUpdate可以检测滑动更新，onPanStart检测滑动开始，onPanEnd检测滑动结束。示例如下：

class MyDraggableWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        // 这里写滑动中的逻辑
        print('滑动更新，偏移量: ${details.delta}');
      },
      onPanStart: (details) {
        print('滑动开始');
      },
      onPanEnd: (details) {
        print('滑动结束');
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.green,
        child: const Center(
          child: Text('拖动我'),
        ),
      ),
    );
  }
}

除了GestureDetector，对于列表滑动等场景，还可以使用ListView、ScrollView等自带滑动功能的组件，它们有相应的滑动监听回调，如ScrollController的addListener方法可以监听滑动位置变化。例如：

class MyScrollableList extends StatefulWidget {
  @override
  _MyScrollableListState createState() => _MyScrollableListState();
}

class _MyScrollableListState extends State<MyScrollableList> {
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      print('当前滚动位置: ${_scrollController.offset}');
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemCount: 50,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    );
  }
}