A new Flutter package project.
@[TOC](flutter_tableView To mimic the ios tableView group hover effect with scrollBar, select the ethnic effect)
A tableView with a height customizable style can be configured to hover or not with scrollBar, customize scrollBar style, position, or not sliding, and click on the prompt effect of scrollBar
Effect 1: Sets the location of the hover, scrollBar, and the prompt widget that the scrollBar clicks on
Effect 2: Sets the start and end of the hover, scrollBar, which can be completely custom by itself, with a simple custom colored Container
Effect 3: plain tableView without any effects. Notice that the style of each cell, the style of section, the height and so on can be customized in tableView
方式1: Download the code and import the folder under lib/src into your own project
方式2: pubspec.yaml
dependencies:
tableview: ^0.0.3Console execution: flutter pub get
Write where you want to use the Tableview:
import 'package:tableview/tableview.dart';
// 设置数据源，scrollBar的数据原
static List<String> headerList = ["A","B","C","D","E","G","H","J","K","L","M","N","P","Q","S","T","W","X","Y","Z"];
// 设置tableView的数据源，如果需要显示section，数据源就是二位数据
static List<List<String>> rowList = [
["阿昌族"],
["白族","保安族","布朗族","布依族"],
["藏族","朝鲜族"],
["傣族","达斡尔族","德昂族","东乡族","侗族","独龙族"],
["鄂伦春族","俄罗斯族","鄂温克族"],
["高山族","仡佬族"],
["哈尼族","汉族","哈萨克族","赫哲族","回族"],
["景颇族","京族","基诺族"],
["柯尔克孜族"],
["拉祜族","傈僳族","黎族","珞巴族"],
["满族","毛南族","门巴族","蒙古族","苗族","仫佬族"],
["纳西族","怒族"],
["普米族"],
["羌族"],
["撒拉族","畲族","水族"],
["塔吉克族","塔塔尔族","土家族","土族"],
["佤族","维吾尔族","乌孜别克族"],
["锡伯族"],
["瑶族","彝族","裕固族"],
["壮族"]
];
int choseSection = 0;
String title = "";
double btnWidth = 60;
int num = 5;
double space = 10;
@override
void initState() {
super.initState();
}
// tableview的代理，用于设置tableview的section个数，cell个数，section(header)高度，cell高度,每个cell和section的样式
var delegate = TableViewDelegate(
numberOfSectionsInTableView: (){return headerList.length;},
numberOfRowsInSection: (int section){ return rowList[section].length;},
heightForHeaderInSection: (int section) { return 20;},
heightForRowAtIndexPath: (IndexPath indexPath) { return 40;},
viewForHeaderInSection: (BuildContext context, int section){
return Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 10),
color: Color.fromRGBO(220, 220, 220, 1),
height: 20,
child: Text(headerList[section]),
);
},
cellForRowAtIndexPath: (BuildContext context, IndexPath indexPath) {
return InkWell(
onTap: (){
Navigator.of(context).pop(rowList[indexPath.section][indexPath.row]);
},
child: Container(
color: Colors.white,
height: 40,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child:Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 10),
child: Text(
rowList[indexPath.section][indexPath.row],
style: TextStyle(
fontSize: 16,
color: Colors.grey,
),
textAlign: TextAlign.left,
),
),
),
Divider(indent: 10,endIndent: 10,height: 1,),
],
),
),
);
}
);
@override
Widget build(BuildContext context) {
return NotificationListener<TableViewNotifier> (
onNotification: (notification) { // tableview滚动更改了悬停section会通知出来
choseSection = notification.scrollSection;
setState(() {
});
return true;
},
child: TableView(
delegate: delegate,
// scrollbar的样式，可通过 implements TableViewScrollBar 自定义，如果同时设置startAlignment和endAlignment会有滑动效果，如效果2所示
scrollbar: TableViewHeaderScrollBar(
headerTitleList: headerList,
itemHeight: 20,
startAlignment: Alignment.centerRight,
choseSection: choseSection,
indexChanged: (index) { // scrollBar改变索引
title = headerList[index];
choseSection = index;
setState(() {
});
},
gestureFinished: (){ // 手势抬起
title = "";
setState(() {
});
},
),
// scrollBar点击中间提示的Widget，可通过implement TableViewCenterTip自定义，无设置则无提示效果
centerTip: TableViewCenterTitle(
alignment: Alignment.center,
title: title,
),
),
);
}