A new Flutter package project.

@TOC(flutter_tableView To mimic the ios tableView group hover effect with scrollBar, select the ethnic effect)

The 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

  tableview: ^0.0.3

Console 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;

  void 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: (){
        child: Container(
          color: Colors.white,
          height: 40,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
                  alignment: Alignment.centerLeft,
                  padding: EdgeInsets.only(left: 10),
                  child: Text(
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.grey,
                    textAlign: TextAlign.left,
              Divider(indent: 10,endIndent: 10,height: 1,),

  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(
          title: title,