flutter:实现ListView头部悬浮

2023-09-04  本文已影响0人  xing_x

最近app想要类似于ios的那种tableview,区头悬停的效果。最后找到了一个大神的方案。比较不错,UI效果也达到了理想效果。
具体的实现代码:
主要是gsy大神的这个类:(地址:https://github.com/CarGuo/gsy_flutter_demo

stick_render.dart
stick_widget.dart

这两个类需要下载下来,放到你的项目中去,然后实现这种效果的方法就很简单了。

准备好数据源:
Map<String, List<String>> itemSectionList = {
  '远程模块': ["远程拜访"],
  '订单提醒模块': ["远程订单"],
  '拜访提醒模块': ["店前拜访提醒"],
  '门店拜访': ["1-进入门店"],
  '生动化执行': ["2-生动化执行"],
  '店铺检查': ["3-店铺检查"],
  '库存建议': ["4-店铺检查"],
  '店员教育': ["5-店员教育"],
  '结束拜访': ["6-结束拜访"],
  '未拜访原因': ["7-未拜访原因"],
};
实现方法:
class sectionTableview extends StatelessWidget {
  sectionTableview({super.key});
  //区头数组
  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(
              ///区头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),
                ),
              ),
            ),
          );
        });
  }
}

需要注意的是区头和cell的高度是固定的,而且外面的container高度也是固定的。具体的实现原来需要看StickRender这个类。


Untitled.gif
上一篇下一篇

猜你喜欢

热点阅读