一個簡單的關于吸頂效果的列表

其實大體挺簡單的，核心是使用了一個吸頂插件sticky_headers實現的，在這里把代碼貼出來

只是有頁面效果，搜索并沒有完善，如果后續我完善了，會再來完善一下這篇文章。
關于其中的數據問題，我是隨便寫了一些數據，如果真正要使用的話，需要造一個完善的數據，一個數組當中要有吸頂標志數據，在吸頂標志數據下面再有的就是我們展示的list數據

示范數據

List<dynamic> formData = [{'indentition':'A','data':[{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201804/25/20180425000646_fsmLS.thumb.700_0.jpeg","userName":"阿寶","desc":"虎牙平臺主播……","groupCode":"abao"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201807/20/20180720184625_wfdte.thumb.700_0.jpeg","userName":"阿樂","desc":"馬什么梅？？？？夏洛特煩惱","groupCode":"ale"},]}];

---

AtUserProvider.dart

import 'package:flutter/material.dart'; import 'package:lpinyin/lpinyin.dart';class AtUserProvider {List<dynamic> formData = [{'indentition':'A','data':[{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201804/25/20180425000646_fsmLS.thumb.700_0.jpeg","userName":"阿寶","desc":"虎牙平臺主播……","groupCode":"abao"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201807/20/20180720184625_wfdte.thumb.700_0.jpeg","userName":"阿樂","desc":"馬什么梅？？？？夏洛特煩惱","groupCode":"ale"},]}];List<Map> data = [{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201603/06/20160306204517_i4Se8.jpeg","userName":"爸爸","desc":"我是描述……","groupCode":"baba"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg","userName":"媽媽","desc":"","groupCode":"mama"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201804/25/20180425000646_fsmLS.thumb.700_0.jpeg","userName":"馬勒勒","desc":"虎牙平臺主播……","groupCode":"malele"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201807/20/20180720184625_wfdte.thumb.700_0.jpeg","userName":"馬冬梅","desc":"馬什么梅？？？？夏洛特煩惱","groupCode":"madongmei"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201509/22/20150922134955_vfEWL.jpeg","userName":"阿壩","desc":"描述","groupCode":"abei"},{"avatarUrl":"http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20200201/43d42a8c4ae64ae8b10e6189d7ab6b1c.jpeg","userName":"北京","desc":"","groupCode":"beijing"},{"avatarUrl":"http://hbimg.b0.upaiyun.com/e330a06d2af976f03c12077932f037bbf900551876486-IGKDyg_fw658","userName":"韓佳佳","desc":"","groupCode":"hanjiajia"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201604/13/20160413140938_mT5kN.jpeg","userName":"北方的神","desc":"我是雷神托爾，北方的神","groupCode":"beifangdeshen"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201611/17/20161117201306_UxBuA.thumb.700_0.jpeg","userName":"韓信","desc":"","groupCode":"hanxin"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201707/26/20170726102254_J4MH5.jpeg","userName":"弟弟","desc":"你就是個弟弟","groupCode":"didi"},{"avatarUrl":"http://b-ssl.duitang.com/uploads/item/201603/09/20160309205408_SeLmZ.thumb.700_0.jpeg","userName":"弟媳啊","desc":"描述","groupCode":"dixi"}];List pro = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; } import 'package:flutter/material.dart'; import 'package:jianzhi/providers/AtUserProvider.dart'; import 'package:sticky_headers/sticky_headers.dart';class FriendList extends StatelessWidget {@overrideWidget build(BuildContext context) {ScrollController controller = ScrollController();double rpx = MediaQuery.of(context).size.width / 750;return Scaffold(appBar:AppBar(backgroundColor: Color(0xff121319),leading: IconButton(icon: Icon(Icons.close),onPressed: (){Navigator.pop(context);},),title: Text('通訊錄'),centerTitle: true,bottom: PreferredSize(preferredSize: Size.fromHeight(80 * rpx), // 要設置一下高度才可以使用child: Container(// margin: EdgeInsets.symmetric(vertical:20*rpx),color: Colors.grey[700],padding: EdgeInsets.symmetric(horizontal:20*rpx),child: TextField(decoration: InputDecoration(icon: Icon(Icons.search, color: Colors.grey[500],),hintText: '搜索用戶備注或名字',hintStyle: TextStyle(color: Colors.grey[500],)),),),),),body: genUserList(context, controller));} }genUserList(context, controller){AtUserProvider provider = AtUserProvider();var data = provider.data;print(data);return ListView.builder(shrinkWrap: true,controller: controller,itemCount: data.length,itemBuilder: (BuildContext context, int index){return StickyHeader(header: Container(alignment: Alignment.centerLeft,padding: EdgeInsets.only(left:20),width: MediaQuery.of(context).size.width,height: 49,decoration: BoxDecoration(color: Colors.grey),child: Text(provider.pro[index], style: TextStyle(color: Colors.white,fontSize: 20),),),content: genContentList(data,context, controller),);}); }genContentList(data, BuildContext context, controller){double rpx = MediaQuery.of(context).size.width / 750;return ListView.builder(shrinkWrap: true,controller: controller,itemCount: data.length,itemBuilder:(BuildContext context, int index){return Container(decoration: BoxDecoration(color: Colors.black),height: 130 * rpx,child: Row(children: <Widget>[Container(width: 80*rpx, child: CircleAvatar(backgroundImage: NetworkImage(data[index]['avatarUrl']),)),Container(padding: EdgeInsets.only(left:20*rpx),width: 420*rpx, child: Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(child: Text(data[index]['userName'],style: TextStyle(fontSize: 32*rpx, color: Colors.white), maxLines: 1, overflow: TextOverflow.ellipsis),),data[index]['desc'].toString().length == 0 ? Text('') : Container(child: Text(data[index]['desc'],style: TextStyle(color:Colors.grey[500], fontSize: 32*rpx), maxLines: 1, overflow: TextOverflow.ellipsis,),),],),),Container(alignment: Alignment.centerRight,width: 250*rpx,child: Icon(Icons.arrow_right, color: Colors.white,),)],),);}); }

總結

以上是生活随笔為你收集整理的Flutter关于简单的吸顶通讯录制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。