如何解决在颤振应用程序中如何将数据从标题放到 appBar
我有 ListView,当我滚动列表时,我想显示标题中超出 appBar 屏幕顶部的数据。 StickyHeader 不建议。我特别需要在 appBar 的标题中显示信息我试图使用滚动控制器但没有成功 var _controller = ScrollController();
@override
void initState() {
super.initState();
// Setup the listener.
_controller.addListener(() {
if (_controller.position.atEdge) {
if (_controller.position.pixels == 0) {
// You're at the top.
} else {
// You're at the bottom.
}
}
});
}
事实证明,只有当我返回列表顶部时才会显示某些内容。但是我找不到办法摆脱我的情况来显示信息
从列表顶部的每个标题,所以我想将“非粘性示例”替换为“标题#0”,当它在顶部时,当“标题#2”在顶部时显示它在 appBar 上
解决方法
定义一个在 AppBar 中显示文本的变量(或小部件):
String appBarTitle = "Initial Value";
定义滚动控制器:
ScrollController scrollController;
定义一个函数来处理滚动事件(它改变了 AppBar 标题的值): (这里只是添加了一个例子,即到达底部时的位置)
void _scrollListener() {
if (scrollController.offset != scrollController.position.minScrollExtent &&
!scrollController.position.outOfRange) {
// at bottom
// change the value of the AppBar string
setState(() {
appBarTitle = "Something new";
});
}
}
初始化滚动控制器
@override
void initState() {
scrollController = ScrollController();
scrollController.addListener(_scrollListener);
super.initState();
}
将脚手架中的 AppBar 定义为:
AppBar(
title: Text(appBarTitle),)
使用上述内容,您可以在列表滚动到底部时更改 AppBar 标题 - 然后您可以编辑 _scrollListener 以根据您所需的逻辑更改值。
,您可以试试sticky_headers插件:-
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(itemBuilder: (context,index) {
return StickyHeader(
header: Container(
height: 50.0,color: Colors.blueGrey[700],padding: EdgeInsets.symmetric(horizontal: 16.0),alignment: Alignment.centerLeft,child: Text('Header #$index',style: const TextStyle(color: Colors.white),),content: Container(
child: Image.network(imageForIndex(index),fit: BoxFit.cover,width: double.infinity,height: 200.0),);
});
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。