前言
我们今天使用插件完成以下功能点：
- 1.顶部搜索按钮
未完成 ❌ - 2.通讯录列表
完成 ✅ - 3.右侧字母导航
未完成 ✅ - 4.底部朋友数量汇总
未完成 ❌ - 5.通讯录列表滑动时，分组字母顶部停留
未完成 ✅
预览
分组字母顶部停留
右侧字母导航
通讯录列表
解决思路
1.使用第三方插件section_view完成。
2.使用ListView完成思路：
实现
修改pubspec.yaml配置文件
dependencies:
# 时间格式插件
date_format: ^2.0.7
# 列表左侧滑动插件
flutter_slidable: ^2.0.0
# 列表上滑粘头右侧导航字母插件
section_view: ^2.0.5
通讯录
import 'package:flutter/material.dart';
import 'package:pseudo_we_chat/constant/style.dart';
import 'package:section_view/section_view.dart';
class DirectoryPage extends StatefulWidget {
const DirectoryPage({Key? key}) : super(key: key);
@override
State<DirectoryPage> createState() => _DirectoryPageState();
}
class _DirectoryPageState extends State<DirectoryPage> {
final List<DirectoryGroupData> _list = [
DirectoryGroupData(groupName: "", list: [
DirectoryData(
id: BigInt.from(-1),
avatar: "images/friend.png",
name: "新的朋友",
initial: "",
),
DirectoryData(
id: BigInt.from(-1),
avatar: "images/group_chat.png",
name: "群聊",
initial: "",
),
DirectoryData(
id: BigInt.from(-1),
avatar: "images/label.png",
name: "标签",
initial: "",
),
DirectoryData(
id: BigInt.from(-1),
avatar: "images/official_accounts.png",
name: "公众号",
initial: "",
)
])
];
final List<DirectoryData> _dataList = [
DirectoryData(
id: BigInt.from(1),
avatar:
"https://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg",
name: "啊三",
initial: "a",
),
DirectoryData(
id: BigInt.from(11),
avatar: "https://www.itying.com/images/flutter/1.png",
name: "阿衰",
initial: "a",
),
DirectoryData(
id: BigInt.from(12),
avatar: "https://www.itying.com/images/flutter/1.png",
name: "阿里巴巴",
initial: "a",
),
DirectoryData(
id: BigInt.from(2),
avatar: "https://www.itying.com/images/flutter/2.png",
name: "在水一方",
initial: "z",
remarks: "xxxx",
),
DirectoryData(
id: BigInt.from(2),
avatar: "https://www.itying.com/images/flutter/2.png",
name: "晚秋骄阳",
initial: "w",
),
DirectoryData(
id: BigInt.from(2),
avatar: "https://www.itying.com/images/flutter/3.png",
name: "云淡风轻",
initial: "y",
),
DirectoryData(
id: BigInt.from(2),
avatar: "https://www.itying.com/images/flutter/3.png",
name: "人已老心未老",
initial: "r",
),
DirectoryData(
id: BigInt.from(2),
avatar: "https://www.itying.com/images/flutter/1.png",
name: "回忆",
initial: "h",
),
DirectoryData(
id: BigInt.from(2),
avatar: "https://www.itying.com/images/flutter/1.png",
name: "人生岁月老添辉",
initial: "r",
),
DirectoryData(
id: BigInt.from(3),
avatar: "https://www.itying.com/images/flutter/2.png",
name: "浪漫人生",
initial: "l",
),
DirectoryData(
id: BigInt.from(4),
avatar: "https://www.itying.com/images/flutter/1.png",
name: "时光荏苒",
initial: "s",
),
DirectoryData(
id: BigInt.from(4),
avatar: "https://www.itying.com/images/flutter/3.png",
name: "上善若水",
initial: "s",
),
];
late final ScrollController _scrollController;
final GlobalKey _globalKey = GlobalKey(debugLabel: "list");
@override
void initState() {
super.initState();
Map<String, List<DirectoryData>> map = {
for (var e in _dataList)
e.initial: _dataList.where((item) => item.initial == e.initial).toList()
};
var tempData = map.keys
.map((key) => DirectoryGroupData(groupName: key, list: map[key]!))
.toList();
_list.addAll(tempData);
_list.sort((a, b) => a.groupName.compareTo(b.groupName));
_scrollController = ScrollController();
_scrollController.addListener(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
title: const Text(
"通讯录",
style: TextStyle(color: Style.appBarTextColor),
),
backgroundColor: Style.appBarBackgroundColor),
body: SectionView<DirectoryGroupData, DirectoryData>(
source: _list,
onFetchListData: (header) => header.list,
enableSticky: true,
alphabetAlign: Alignment.center,
alphabetInset: const EdgeInsets.all(4.0),
headerBuilder: (context, headerData, headerIndex) {
if (headerData.groupName == '') {
return const SizedBox.shrink();
}
return Container(
alignment: Alignment.centerLeft,
height: 30,
color: Style.groupBackgroundColor,
padding: const EdgeInsets.only(left: 15, top: 5, bottom: 5),
child: Text(headerData.groupName.toUpperCase()));
},
itemBuilder:
(context, itemData, itemIndex, headerData, headerIndex) {
return Container(
color: Style.contentBackgroundColor,
child: Column(
children: [
//构建列表信息
ListTile(
leading: itemData.avatar.startsWith("images")
? Image.asset(
itemData.avatar,
width: 50,
height: 50,
)
: Image.network(
itemData.avatar,
width: 50,
height: 50,
fit: BoxFit.cover,
),
title: Text(itemData.name),
),
//构建下划线
_buildUnderline(headerData.list, itemIndex,
_list.length - 1 == headerIndex)
],
),
);
},
alphabetBuilder: (context, headerData, isCurrent, headerIndex) {
return isCurrent
? SizedBox(
width: 18,
height: 18,
child: Container(
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(9)),
child: Center(
child: Text(
headerData.groupName == ''
? "🔍"
: headerData.groupName,
style: const TextStyle(color: Colors.white, fontSize: 12),
))))
: Text(
headerData.groupName == '' ? "🔍" : headerData.groupName,
style: const TextStyle(color: Color(0xFF767676)),
);
},
));
}
Widget _buildUnderline(
List<DirectoryData> data, int currentIndex, bool isLastGroup) {
int dataSize = data.length;
bool isLastItem = (dataSize - 1 == currentIndex);
// 最后一组,最后一个不需要缩进，直接添加下划线，其余的添加缩进下划线
if (isLastGroup) {
return Padding(
padding: isLastItem
? const EdgeInsets.only()
: const EdgeInsets.only(left: 80),
child: const Divider(),
);
}
//如果只有一个元素不添加下划线
if (dataSize <= 1 || isLastItem) {
return const SizedBox.shrink();
}
//其余添加缩进下划线
return const Padding(
padding: EdgeInsets.only(left: 80),
child: Divider(),
);
}
}
class DirectoryData {
const DirectoryData(
{required this.id,
required this.avatar,
required this.initial,
required this.name,
this.remarks});
/// id
final BigInt id;
/// 头像
final String avatar;
/// 名称
final String name;
/// 首字母
final String initial;
/// 备注
final String? remarks;
}
class DirectoryGroupData {
const DirectoryGroupData({
required this.groupName,
required this.list,
});
/// 分组名称
final String groupName;
/// 分组数据
final List<DirectoryData> list;
}
