美文网首页
flutter:实现ListView头部悬浮

flutter:实现ListView头部悬浮

作者: xing_x | 来源:发表于2023-09-04 14:20 被阅读0次

    最近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

    相关文章

      网友评论

          本文标题:flutter:实现ListView头部悬浮

          本文链接:https://www.haomeiwen.com/subject/cebfvdtx.html