1、使用控件器监听
controller是什么
`controller` 通常被称为"控制器"。它是一个对象,用于管理用户界面中的交互和数据。不同类型的控件有不同的控制器,例如文本输入框的控制器通常被称为"文本编辑控制器"( `TextEditingController` ),滚动视图的控制器通常被称为"滚动控制器"( `ScrollController` ),动画的控制器通常被称为"动画控制器"( `AnimationController` )等等。
控制器在Flutter中被广泛使用,它们提供了一种方便的方式来管理用户界面的交互和状态。通过控制器,您可以获取或设置控件的值、监听控件的变化、控制控件的行为等等。
ScrollController是什么
ScrollController(滚动控制器)是Flutter中用于管理滚动视图的控制器对象。它允许您监听滚动事件、控制滚动位置和执行其他与滚动相关的操作。
ScrollController提供了以下常用属性和方法:
- `offset` :获取或设置当前滚动位置的偏移量。
- `position` :获取当前滚动位置的ScrollPosition对象。
- `initialScrollOffset` :设置滚动视图的初始滚动偏移量。
- `animateTo()` :以动画形式滚动到指定的偏移量。
- `jumpTo()` :立即滚动到指定的偏移量。
- `addListener()` :添加滚动监听器。
- `removeListener()` :移除滚动监听器。
- `dispose()` :释放控制器。
通过使用ScrollController,您可以在滚动视图滚动时执行自定义操作,例如加载更多数据、实现无限滚动等。
ScrollController _scrollController = ScrollController();
@override
void initState() {
super.initState();
_scrollController.addListener(_scrollListener);
}
@override
void dispose() {
_scrollController.removeListener(_scrollListener);
_scrollController.dispose();
super.dispose();
}
void _scrollListener() {
if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
// 当滚动到底部时执行的操作
}
}
ListView(
controller: _scrollController,
children: <Widget>[
// 列表项
],
);
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
//滚动控制器,可以带一个初始化参数,表示偏移量
ScrollController _scrollController = ScrollController(initialScrollOffset: 300);
//控制floatingActionButton显示状态
var isShow=false;
@override
void initState() {
// TODO: implement initState
super.initState();
//添加监听
_scrollController.addListener(() {
print("监听到滚动1...${_scrollController.offset}");
setState(() {
isShow=_scrollController.offset>1000;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("登录界面"),
),
body:ListView.builder(
itemCount: 100,
controller: _scrollController,//添加控件器
itemBuilder: (BuildContext context, int index){
return ListTile(
leading: Icon(Icons.people),
title: Text('Item ${index + 1}'),
);
},
),
//浮动操作按钮,isShow为真显示
floatingActionButton: isShow? FloatingActionButton(
child: Icon(Icons.arrow_upward),
onPressed: (){
/**
* - offset :要滚动到的目标位置的偏移量。
- duration (可选):滚动动画的持续时间,默认为 Duration(milliseconds: 300) 。
- curve (可选):滚动动画的曲线类型,默认为 Curves.easeInOut 。
*/
_scrollController.animateTo(0, duration: Duration(seconds: 2), curve: Curves.ease);
},
):null,
);
}
}
void main() {
runApp(MaterialApp(
home: LoginPage(),
));
}
2、NotificationListener
NotificationListener是一个小部件(Widget),用于监听和处理各种通知事件。 通过使用NotificationListener,您可以捕获并响应来自子树中各种通知的事件,包括滚动、手势、焦点等。您可以使用它来实现一些特定的交互逻辑或者在特定事件发生时执行一些自定义操作。 使用NotificationListener时,您需要指定一个Notification类的子类作为泛型参数,以指定您要监听的特定通知类型。然后,您可以重写onNotification方法,该方法会在接收到相应通知时被调用。 以下是一个使用NotificationListener的示例:
NotificationListener<ScrollNotification>(
onNotification: (notification) {
if (notification is ScrollStartNotification) {
// 处理滚动开始事件
return true;
} else if (notification is ScrollUpdateNotification) {
// 处理滚动更新事件
return true;
} else if (notification is ScrollEndNotification) {
// 处理滚动结束事件
return true;
}
return false;
},
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
),
);
NotificationListener(
onNotification: (ScrollNotification notification){
if (notification is ScrollStartNotification) {
// 处理滚动开始事件
print("开始滚动...");
return true;
} else if (notification is ScrollUpdateNotification) {
// 处理滚动更新事件
print('正在滚动...可滚动的范围:${notification.metrics.maxScrollExtent},当前:${notification.metrics.pixels}');
return true;
} else if (notification is ScrollEndNotification) {
// 处理滚动结束事件
print('停止滚动....');
return true;
}
return false;
},
child: ListView.builder(
itemCount: 100,
controller: _scrollController,
itemBuilder: (BuildContext context, int index){
return ListTile(
leading: Icon(Icons.people),
title: Text('Item ${index + 1}'),
);
},
),
),