Flutter基础（UI监听）

文本按钮（TextButton）

文本按钮是没有边框的按钮，当点击时会有涟漪效果。

TextButton(
  onPressed: () {
    // 点击按钮后要执行的代码
    print('文本按钮被点击了');
  },
  child: Text('点击我'),
)

手势检测器（GestureDetector）

GestureDetector 能够检测多种手势，不只是点击，还包括滑动、长按等。

GestureDetector(
  onTap: () {
    // 点击组件后要执行的代码
    print('组件被点击了');
  },
  onLongPress: () {
    // 长按组件后要执行的代码
    print('组件被长按了');
  },
  child: Container(
    width: 200,
    height: 50,
    color: Colors.green,
    child: Center(child: Text('手势检测容器')),
  ),
)

处理带参数的点击事件

要是你需要在点击事件处理函数中传递参数，可以使用闭包来实现。

void handleClick(String value) {
  print('点击的值是: $value');
}

// 在UI中使用
ElevatedButton(
  onPressed: () => handleClick('按钮1'),
  child: Text('按钮1'),
)

文本输入监听

监听用户在文本框中的输入内容，常用于表单验证、搜索等场景。

TextField(
  onChanged: (text) {
    // 文本内容变化时触发
    print('输入的内容: $text');
  },
  onSubmitted: (text) {
    // 用户按下回车键时触发
    print('提交的内容: $text');
  },
)

滚动监听

监听ListView、GridView等滚动组件的位置，可用于实现下拉刷新、加载更多、吸顶效果等。

ScrollController _controller = ScrollController();

@override
void initState() {
  super.initState();
  _controller.addListener(() {
    // 滚动位置变化时触发
    print('当前滚动位置: ${_controller.position.pixels}');
    
    // 判断是否滚动到底部
    if (_controller.position.pixels == _controller.position.maxScrollExtent) {
      print('已滚动到底部');
      // 加载更多数据...
    }
  });
}

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