这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战
Flutter 工程版本兼容配置
我们这里主要完善索引条的功能及聊天列表数据的获取，但是在这之前我们先讲一下工程版本的配置问题。当我们在工程中拖入一些老的文件代码的时候可能会出现一些语法报错问题，可能的原因就是版本兼容的问题，我们可以在 pubspec.yaml 文件中配置 sdk 判断的兼容范围，然后点击 Pub get。如果新建的工程建议是大于等于 2.12.0，因为 2.12.0 是一次大的更新，加入了空安全与值类型安全。
索引条功能完善
在上一篇中我们已经可以获取到点击位置的索引字符，现在我们需要实现的功能是点击索引字符滚动到指定的位置，并且左边添加指示器展示对应的索引字符。下面我们把步骤进行拆分介绍。
滚动效果实现
索引条添加点击回调方法
class IndexBar extends StatefulWidget {
final void Function(String str)? indexBarCallBack;
IndexBar({this.indexBarCallBack});
}
GestureDetector(
onVerticalDragUpdate: (DragUpdateDetails details){
final Function(String str) callBack = widget.indexBarCallBack as Function(String str);
int index = _getIndex(context, details.globalPosition);
callBack(INDEX_WORDS[index]);
},
// 索引条点击
onVerticalDragDown: (DragDownDetails details){
final Function(String str) callBack = widget.indexBarCallBack as Function(String str);
int index = _getIndex(context, details.globalPosition);
callBack(INDEX_WORDS[index]);
},
)
复制代码IndexBar(indexBarCallBack: (String str) {
print(str);
}),//悬浮的索引条
复制代码因为索引条是单独定义的类，所以如果想让外部的列表滚动的话首先需要有一个回调方法，回调到外部。我们在 IndexBar 类中添加了一个 indexBarCallBack 回调方法，在点击索引条的时候调用回调方法。
遍历初始化索引字符对应的偏移量
class _FriendsPageState extends State<FriendsPage> {
final double _cellHeight = 54.5;
final double _groupHeight = 30.0;
final Map _groupOffsetMap = {
};
final List<Friends> _listDatas = [];
ScrollController? _scrollController;
@override
void initState() {
super.initState();
//创建数据
_listDatas..addAll(datas)..addAll(datas);
//按首字母顺序排序
_listDatas.sort((Friends a, Friends b){
return a.indexLetter.compareTo(b.indexLetter);
});
var _groupOffset = _cellHeight * _headerData.length;
//循环计算，将每个组头的位置放入到 _groupOffsetMap 字典中
for (int i = 0; i < _listDatas.length; i++) {
if (i < 1) {
//第一个 cell，一定有头
_groupOffsetMap.addAll({_listDatas[i].indexLetter : _groupOffset});
//保存完了再加_groupOffset
_groupOffset += _cellHeight + _groupHeight;
} else if (_listDatas[i].indexLetter == _listDatas[i - 1]) {
_groupOffset += _cellHeight;
} else {
_groupOffsetMap.addAll({_listDatas[i].indexLetter : _groupOffset});
//保存完了再加_groupOffset
_groupOffset += _cellHeight + _groupHeight;
}
}
}
复制代码当外部获取到索引字符的时候就需要滚动到对应的偏移位置，这里我们用一个 _groupOffsetMap 来存储每个索引字符对应的偏移位置，我们通过循环遍历对 _groupOffsetMap 进行添加数据。
滚动到对应位置
ScrollController? _scrollController;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
}
复制代码child: ListView.builder(itemBuilder: _itemForRow, controller: _scrollController, itemCount: _headerData.length + _listDatas.length,)
复制代码if(_groupOffsetMap[str] != null) {
print(str);
_scrollController!.animateTo(_groupOffsetMap[str], duration: Duration(microseconds: 100), curve: Curves.elasticIn);
}
复制代码在源码中我们可以看到有一个 controller 属性，可以用来控制列表的滚动。我们定义一个 _scrollController 属性，在 initState 方法中进行初始化，并且在 ListView 初始化的时候赋值给 controller 属性，并且在回调方法中滚动到对应位置。duration 代表滚动时长，curve 代表滚动的动画效果，大家可以自己选择动画类型。
添加左边指示器
我们的指示器是添加在索引条上的，所以所以条的布局方式我们采用 Row 部件，并在 children 添加指示器部件跟原来的索引条部件，整体采用左右结构。
Container(
alignment: Alignment(0, _indicatorY),
width: 100,
child: _indicatorHidden ? null : Stack(
alignment: Alignment(-0.2, 0),
children: [
Image(image: AssetImage('images/气泡.png'), width: 60,),
Text(
_indicatorText,
style: TextStyle(
fontSize: 35, color: Colors.white,
),
)
],
),
)
复制代码指示器部件我们采用的是一张图片，并在上面加上文字。这里我们定义了三个变量， _indicatorY 代表竖轴方向的偏移比例系数，_indicatorHidden 代表是否显示，_indicatorText 代表显示的文字，也就是索引字符。
GestureDetector(
onVerticalDragUpdate: (DragUpdateDetails details){
int index = _getIndex(context, details.globalPosition);
callBack(INDEX_WORDS[index]);
setState(() {
_indicatorY = 2.2 / INDEX_WORDS.length * index - 1.1;
_indicatorText = INDEX_WORDS[index];
_indicatorHidden = false;
});
},
// 索引条点击
onVerticalDragDown: (DragDownDetails details){
int index = _getIndex(context, details.globalPosition);
callBack(INDEX_WORDS[index]);
setState(() {
_indicatorY = 2.2 / INDEX_WORDS.length * index - 1.1;
_indicatorText = INDEX_WORDS[index];
_indicatorHidden = false;
});
},
// 索引条点击取消
onVerticalDragEnd: (DragEndDetails details){
setState(() {
_indicatorHidden = true;
});
},
)
复制代码我们在点击方法与取消方法中分别设置这三方变量的值，然后调用 setState 方法，刷新指示器的位置，显示的文字及是否隐藏状态。
聊天列表数据的配置及接口请求
聊天列表数据配置
这里给大家推荐一个 api 仓库 RAP，大家可以自己注册一个账号，并配置接口名称及返回的数据。这里我们定义了聊天列表的接口 /api/chat/list，并且配置了数据，这里我配置的比较简单，就三个属性 imageUrl、name 、name。这里初始值配置的时候 @cname 代表随机生成中文名称，@cparagraph 代表随机生成 message 内容。头像 imageUrl 我们还要借助一个网站 randomuser 可以随机生成假的用户信息数据。
这里我们只用到头像链接地址就可以了，但是这里有一个规律，例如我们将头像链接中的 75 改为别的数字，就会显示别的头像图片，所以接口文档中头像链接我们是这样配置的 ，https://randomuser.me/api/portraits/women/@natural(20,100).jpg ，其中 @natural(20,100) 代表随机生成 20 到 100 之间的数据。
网络常用三方库
这里给大家推荐一个网站 pub.dev，作用类似 github，我们可以在上面搜索一下开源的 flutter 三方库。网络请求的话目前使用比较多的三方库是 http 跟 dio。这里我们先使用 http 进行网络请求演示，这个三方库是 flutter 官方发布的。
三方库配置
在三方库详情页点击复制按钮，在 pubspec.yaml 文件中进行配置，点击 Pub get 按钮进行集成。
网络请求示例
@override
void initState() {
super.initState();
//获取网络数据
_getDatas();
}
_getDatas() async {
final url = Uri.parse('http://rap2api.taobao.org/app/mock/294394/api/chat/list');
final response = await http.get(url);
print(response);
}
复制代码这里需要注意的是需要先导入头文件 import 'package:http/http.dart' as http;，async 代表异步执行，await 代表等待请求完成才往下执行。