当前位置：首页 > news >正文

Flutter基础（UI监听）

news 来源：原创 2025/6/28 8:59:28

文本按钮（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')),);
}