演示demo.gif
拖動(dòng)索引后誓焦，列表滑動(dòng)判斷有點(diǎn)問(wèn)題
用到了拼音獲取首字母的庫(kù)
pinyin: ^3.2.0
1.定義索引的數(shù)組和列表數(shù)組
List<String> words = [];//索引的數(shù)組
List scoreList = []; //列表數(shù)組
2.處理索引的字母
//后臺(tái)返回的列表數(shù)組
for (var scoreItem in state.scoreItems) {
//取出第一個(gè)字
var firstCharacter = '';
if (scoreItem.isTop) {
//置頂,置頂?shù)臅r(shí)候顯示的是圓圈，character是自定義的
scoreItem.character = '○';
}else if (RegExp(r"[a-zA-Z]").hasMatch(firstCharacter)) {
//正則判斷-是英文
scoreItem.character = firstCharacter.toUpperCase();
} else if (RegExp(r"[\u4e00-\u9fa5]") .hasMatch(firstCharacter)) {
//正則判斷-是漢字
final pinyin = PinyinHelper.getShortPinyin(firstCharacter);
//漢字的時(shí)候着帽，取出拼音首字母杂伟，轉(zhuǎn)大寫
scoreItem.character = pinyin.toUpperCase();
} else {
//不是英文或漢字的時(shí)候，顯示#
scoreItem.character = '#';
}
}
//將列表數(shù)據(jù)根據(jù)索引排序仍翰，圓圈放在第一個(gè)赫粥，#放在最后一個(gè)，寫的有點(diǎn)累贅歉备，也懶得優(yōu)化了
state.scoreItems.sort((ScoreItem a, ScoreItem b) {
if(a.character == '#' || b.character=="#"){
return a.character =='#'?1:-1;
}
if(a.character == '○' || b.character=="○"){
return a.character == '○' ? -1:1;
}
return a.character!.compareTo(b.character!);
});
final tempWords = <String>[];
for (var item in state.scoreItems) {
tempWords.add('${item.character}');
}
//去重,得到需要的索引字母列表
words = tempWords.toSet().toList();
words .sort(( a, b) {
if(a == '#' || b=="#"){
return a =='#'?1:-1;
}
if(a == '○' || b=="○"){
return a == '○' ? -1:1;
}
return a.compareTo(b);
});
//計(jì)算偏移量
Map<String, dynamic> groupedData = {};
for (var item in state.scoreItems) {
String character = item.character ?? '';
if (groupedData[character] == null) {
groupedData[character] = {
'character': character,
'offsetY': 0,
'v': {'arr': []}
};
}
groupedData[character]['v']['arr'].add(item);
}
// 轉(zhuǎn)換為列表形式的結(jié)果
List result = groupedData.values.toList();
var offSetY = 0.0;
for (var element in result) {
element['offsetY'] = offSetY;
List items = element['v']['arr'];
for (ScoreItem item in items) {
offSetY += 60;
}
offSetY += (10 + 30);
}
3.搭建UI
Widget buildAZ() {
return Container(
margin: EdgeInsets.only(left: 20, right: 20),
child: ListView.builder(
controller: state.scrollController,
itemCount: state.scoreList.length,
itemBuilder: (cxt, section) {
final List items = (state.scoreList[section]['v']['arr']);
final random = Random().nextInt(8);
return Container(
margin: EdgeInsets.only(bottom: 30),
child: Column(
children: [
Container(
alignment: Alignment.centerLeft,
margin: EdgeInsets.only(bottom: 10),
child: Text(
state.scoreList[section]['character'] == '○'
? 'Top'
: '${state.scoreList[section]['character']}',
style: TextStyle(fontSize: 14, color: AppColor.col232425),
),
),
Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.white,
),
child: SlidableAutoCloseBehavior(
child: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (cxt, row) {
ScoreItem item = items[row];
return GestureDetector(
onTap: () {
// do something here
},
child: Slidable(
key: Key('${item.id}'),
endActionPane: ActionPane(
extentRatio: 0.6,
motion: const BehindMotion(),
children: [
Expanded(
child: GestureDetector(
onTapUp: (details) {
//PDF
},
child: Container(
color: AppColor.col17DCEF,
child: Center(
child: Image.asset(
'assets/shelf/shelf_icon_list_pdf.png',
width: 24,
)),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
logic.toScoreInfo(id: item.id);
},
child: Container(
color: AppColor.col199AF0,
child: Center(
child: Image.asset(
'assets/shelf/shelf_icon_list_inf.png',
width: 24,
)),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
//置頂
// 改個(gè)參數(shù)傅是，刷新界面就行了
},
child: Container(
color: AppColor.colFFC717,
// width: 48.w,
child: Center(
child: Image.asset(
(item.isTop ?? false)
? 'assets/shelf/shelf_icon_list_untop.png'
: 'assets/shelf/shelf_icon_list_top.png',
width: 24,
)),
),
),
),
Expanded(
child: GestureDetector(
onTapUp: (details) {
//分享
},
child: Container(
color: AppColor.colFF7F26,
// width: 48.w,
child: Center(
child: Image.asset(
'assets/shelf/shelf_icon_list_share.png',
width: 24,
)),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
//刪除
},
child: Container(
color: AppColor.colFD4246,
child: Center(
child: Image.asset(
'assets/shelf/shelf_icon_list_del.png',
width: 24,
)),
),
),
),
]),
child: SizedBox(
height: 60,
child: Row(
children: [
Container(
width: 28,
height: 28,
margin:
EdgeInsets.only(left: 12, right: 12),
decoration: BoxDecoration(
color: state
.colors[(random + row) % 8]
.withOpacity(0.3),
borderRadius:
BorderRadius.circular(14)),
child: Image.asset(
'assets/shelf/com_icon_score.png'),
),
Expanded(
child: Text(
'${item.name}',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: AppColor.col232425,
fontSize: 16),
),
),
],
),
),
),
);
},
itemCount: items.length,
separatorBuilder: (BuildContext context, int index) {
return Container(
height: 1,
color: AppColor.colF2F6F9,
margin: EdgeInsets.only(left: 52),
);
},
),
),
)
],
),
);
}),
);
}
4.事件處理
//獲取選中的item的字符
int getIndex({required BuildContext context, required Offset globalPosition}) {
RenderBox box = context.findRenderObject() as RenderBox;
double dy = box.globalToLocal(globalPosition).dy;
const itemHeight =20;
final index = (dy ~/ itemHeight).clamp(0, state.words.length - 1);
return index;
}
//手指在索引條上滑動(dòng)的時(shí)候，改變顯示的文字
void wordChanged(int index) {
state.slipIndex = index;
//進(jìn)度條總高度
final totalHeight = 20 * state.words.length/2;
//當(dāng)前的高度
final currentHeight = 20 * index;
final rate = currentHeight/totalHeight;
state.indicatorOffsetY = currentHeight.toDouble()-15;
// print(state.indicatorOffsetY);
final word = state.words[index];
final wordIndex =
state.scoreList.indexWhere((element) => element['character'] == word);
final currentOffsetY = state.scrollController.offset;
double maxScrollExtent = state.scrollController.position.maxScrollExtent;
//判斷的有問(wèn)題，在滑動(dòng)到所以列表的最后幾個(gè)字母時(shí)喧笔，滾動(dòng)偏移量不應(yīng)該大于手機(jī)高度+組頭的偏移量（好像是這個(gè)意思）
if (wordIndex != -1) {
final offsetY = state.scoreList[wordIndex]['offsetY'];
if (currentOffsetY == maxScrollExtent && offsetY > maxScrollExtent) {
} else {
state.scrollController.animateTo(offsetY,
duration: const Duration(milliseconds: 300), curve: Curves.easeIn);
}
}
update(['indexSlip']);
}
