最近app想要類似于ios的那種tableview忌锯，區(qū)頭懸停的效果伪嫁。最后找到了一個大神的方案。比較不錯偶垮，UI效果也達到了理想效果张咳。
具體的實現(xiàn)代碼：
主要是gsy大神的這個類：（地址：https://github.com/CarGuo/gsy_flutter_demo）

stick_render.dart
stick_widget.dart

這兩個類需要下載下來，放到你的項目中去似舵，然后實現(xiàn)這種效果的方法就很簡單了晶伦。

準備好數(shù)據(jù)源：

Map<String, List<String>> itemSectionList = {
  '遠程模塊': ["遠程拜訪"],
  '訂單提醒模塊': ["遠程訂單"],
  '拜訪提醒模塊': ["店前拜訪提醒"],
  '門店拜訪': ["1-進入門店"],
  '生動化執(zhí)行': ["2-生動化執(zhí)行"],
  '店鋪檢查': ["3-店鋪檢查"],
  '庫存建議': ["4-店鋪檢查"],
  '店員教育': ["5-店員教育"],
  '結束拜訪': ["6-結束拜訪"],
  '未拜訪原因': ["7-未拜訪原因"],
};

實現(xiàn)方法：

class sectionTableview extends StatelessWidget {
  sectionTableview({super.key});
  //區(qū)頭數(shù)組
  final List _titles = itemSectionList.keys.toList();
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        physics: AlwaysScrollableScrollPhysics(),
        itemCount: itemSectionList.length,
        itemBuilder: (context, index) {
          String sectiontitle = _titles[index];
        String cellValue = itemSectionList[sectiontitle]?.first as String;
          return Container(
            height: 100.0,
            child: StickWidget(
              ///區(qū)頭header
              stickHeader: Container(
                height: 50.0,
                color: Colors.greenAccent[400],
                padding: const EdgeInsets.only(left: 10.0),
                alignment: Alignment.centerLeft,
                child: InkWell(
                  onTap: () {
                    print("header");
                    String title = _titles[index];
                    Log.i('----->$title');
                  },
                  child: Text(
                    '模塊：$sectiontitle',
                  ),
                ),
              ),
              ///content
              stickContent: InkWell(
                onTap: () {
                  print("content");
                },
                child: Container(
                  margin: const EdgeInsets.only(left: 10),
                  // color: Colors.pinkAccent,
                  height: 50.0,
                  child: Text(cellValue),
                ),
              ),
            ),
          );
        });
  }
}

需要注意的是區(qū)頭和cell的高度是固定的，而且外面的container高度也是固定的啄枕。具體的實現(xiàn)原來需要看StickRender這個類婚陪。

Untitled.gif