flutter_tableView 仿照ios的tableView分组悬停效果,带scrollBar, 选择民族效果
效果
高度可自定义样式的tableView,可自由配置是否悬停、是否带scrollBar,自定义scrollBar样式,位置,是否滑动,scrollBar点击提示效果
效果1: 设置了悬停、scrollBar的位置,scrollBar点击的提示widget
效果2: 设置了悬停、scrollBar的起始结束位置,scrollBar可完全由自己自定义,这里只简单自定义了一个带颜色的Container
效果3: 什么效果都不带的普通tableView,注意,tableView中每个cell的样式,section的样式,高度等等均可自定义
使用方法
导入文件
方式1: 将代码下载下来,将里面的lib/src下的文件夹导入到自己的项目中
方式2: pubspec.yaml 添加
dependencies:
tableview: ^0.0.1
然后控制台执行: flutter pub get 既可
使用
在要使用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,
),
),
);
}