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

stick_render.dart
stick_widget.dart

這兩個(gè)類需要下載下來(lái)，放到你的項(xiàng)目中去，然后實(shí)現(xiàn)這種效果的方法就很簡(jiǎn)單了。

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

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

實(shí)現(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高度也是固定的。具體的實(shí)現(xiàn)原來(lái)需要看StickRender這個(gè)類。

Untitled.gif