字母索引快速定位

最新推荐文章于 2020-06-11 10:28:53 发布
最新推荐文章于 2020-06-11 10:28:53 发布
阅读量1.1k 收藏
点赞数
分类专栏： Flutter 文章标签： 定位 widget dart flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/salmonberry/article/details/106682583
版权

字母索引快速定位

关于Context的获取

将Widegt写到方法体中与单独写成一个Wiget的区别在于能否拿到context

///右栏的字母表
  Widget _buildLetterIndexView(BuildContext context) => Positioned(
      // top: getScreenUtilHeight(55),
      right: 0,
      bottom: 75,
      width: ScreenUtil().setHeight(30),
      child: Container(
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.symmetric(vertical: ScreenUtil().setHeight(5)),
          color: Colors.transparent,
          // color: Colors.amberAccent,
          child: Column(
            children: _presenter
                .getIndexTags()
                .map((letter) => GestureDetector(
                    onTapDown: (details) {
                      setState(() {
                        _onTap = letter;
                        jumpToLetter(letter);
                      });
                    },
                    onTapUp: (details) {
                      setState(() {
                        _onTap = '';
                      });
                    },
                    onLongPressStart: (details) {
                      setState(() {
                        _onTap = letter;
                      });
                      jumpToLetter(letter);
                    },
                    onLongPressEnd: (details) {
                      setState(() {
                        _onTap = '';
                      });
                    },
                    onVerticalDragStart: (start) {
                      //获取滑动点击的屏幕坐标
                      //获取点触摸到的标签的父盒子，indexBar
                      final RenderBox rb = context.findRenderObject();
                      //计算触摸点在父盒子中的相对位置
                      var local = rb.globalToLocal(start.globalPosition);
                      //获取单个标签的高度
                      final double hight =
                          rb.size.height / _presenter.getIndexTags().length;
                      print('hight:$hight');
                      //求当前触摸的标签的index
                      final int index =
                          (local.dy / _presenter.getIndexTags().length).round();
                      print('当前的index:$index');

                      setState(() {
                        if (index <= 0) {
                          _onTap = _presenter.getIndexTags().first;
                        } else if (index >= _presenter.getIndexTags().length) {
                          _onTap = _presenter.getIndexTags().last;
                        } else {
                          _onTap = _presenter.getIndexTags()[index];
                        }
                      });
                      jumpToLetter(_onTap);
                    },
                    onVerticalDragUpdate: (details) {
                      //获取滑动点击的屏幕坐标
                      //获取点触摸到的标签的父盒子，indexBar

                      final RenderBox rb = context.findRenderObject();
                      //计算触摸点在父盒子中的相对位置
                      print('position:${details.globalPosition}');
                      print('position:${details.localPosition}');
                      var local = rb.globalToLocal(details.globalPosition);
                      print('position:$local');
                      //获取单个标签的高度
                      final double hight =
                          rb.size.height / _presenter.getIndexTags().length;
                      print('hight:$hight');
                      //求当前触摸的标签的index
                      final int index = (local.dy / hight).round();
                      print('当前的index:$index');

                      setState(() {
                        if (index <= 0) {
                          _onTap = _presenter.getIndexTags().first;
                        } else if (index >= _presenter.getIndexTags().length) {
                          _onTap = _presenter.getIndexTags().last;
                        } else {
                          _onTap = _presenter.getIndexTags()[index];
                        }
                      });
                      jumpToLetter(_onTap);
                    },
                    onVerticalDragEnd: (details) {},
                    child: Padding(
                        padding: EdgeInsets.only(
                            top: ScreenUtil().setHeight(1),
                            bottom: ScreenUtil().setHeight(1)),
                        child: Container(
                            // color: Colors.blueAccent,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(80),
                              color: _onTap == letter
                                  ? Colours.black.withAlpha(50)
                                  : Colors.transparent,
                            ),
                            width: ScreenUtil().setWidth(30),
                            height: ScreenUtil().setHeight(16),
                            child: Center(
                                child: Text(
                              letter,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: ScreenUtil().setSp(Dimens.superfine),
                                color: _onTap == letter
                                    ? Colours.white
                                    : Colours.darkGray,
                                fontWeight: Weights.bold,
                              ),
                            ))))))
                .toList(),
          )));

  ///跳转到指定的字母位置
  void jumpToLetter(String letter) {
    final index = _presenter.findLastStartLetterIndex(letter);
    //计算顶部到[AllContacts]的固定距离
    // final RenderBox top = _topHightGlobalkey.currentContext.findRenderObject();
    // final RenderBox contactsGroupTitle =
    // _contactsGroupTitleGlobalKey.currentContext.findRenderObject();
    // final RenderBox contacts =
    //     _contactsGlobalKey.currentContext.findRenderObject();

    // final itemHight = contacts.size.height / (_presenter.currentContactsLength);
    final itemHight = ScreenUtil().setHeight(90);

    if (index != -1) {
      _letterPositions[letter] = index * itemHight;
      print('itemHight:$itemHight');
      print('高度：${_letterPositions[letter]}');
    }

    if (_letterPositions.isNotEmpty) {
      final _pos = _letterPositions[letter];

      if (_pos != null) {
        _scrollController.animateTo(
            _pos.clamp(0, _scrollController.position.maxScrollExtent),
            duration: const Duration(microseconds: 200),
            curve: Curves.easeOut);
      }
    }
  }

当前的index:7

flutter: position:Offset(409.0, 204.3) //detail获取的全局坐标

flutter: position:Offset(22.2, -142.1) //detail获取的局部坐标

flutter: position:Offset(409.0, 204.3) //获取indexBar的触摸点全局坐标转换为局部坐标

flutter: hight:27.25925925925926

可以看到通过方法体_buildLetterIndexView()来生成的的indexBar,我们是无法通过context获取到它内部的相对坐标的。也就是说这里通过final RenderBox rb = context.findRenderObject();获取的是外部的Widget

class _IndexBarState extends State<IndexBar> {
  ///用于控制字母的对应位置
  Map<String, double> _letterPositions = {};

  ///第一个字母开始的位置
  ///按下时的标志
  String _onTap = '';

  ///跳转到指定的字母位置
  void jumpToLetter(String letter) {
    final index = widget.presenter.findLastStartLetterIndex(letter);
    final itemHight = ScreenUtil().setHeight(90);

    if (index != -1) {
      _letterPositions[letter] = index * itemHight;
      print('itemHight:$itemHight');
      print('高度：${_letterPositions[letter]}');
    }

    if (_letterPositions.isNotEmpty) {
      final _pos = _letterPositions[letter];

      if (_pos != null) {
        widget.scrollController.animateTo(
            _pos.clamp(0, widget.scrollController.position.maxScrollExtent),
            duration: const Duration(microseconds: 200),
            curve: Curves.easeOut);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
        // top: getScreenUtilHeight(55),
        right: 0,
        bottom: 75,
        width: ScreenUtil().setHeight(30),
        child: Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.symmetric(vertical: ScreenUtil().setHeight(5)),
            color: Colors.transparent,
            // color: Colors.amberAccent,
            child: Column(
              children: widget.presenter
                  .getIndexTags()
                  .map((letter) => GestureDetector(
                      onTapDown: (details) {
                        setState(() {
                          _onTap = letter;
                          jumpToLetter(letter);
                        });
                      },
                      onTapUp: (details) {
                        setState(() {
                          _onTap = '';
                        });
                      },
                      onLongPressStart: (details) {
                        setState(() {
                          _onTap = letter;
                        });
                        jumpToLetter(letter);
                      },
                      onLongPressEnd: (details) {
                        setState(() {
                          _onTap = '';
                        });
                      },
                      onVerticalDragStart: (start) {
                        //获取滑动点击的屏幕坐标
                        //获取点触摸到的标签的父盒子，indexBar
                        final RenderBox rb = context.findRenderObject();
                        //计算触摸点在父盒子中的相对位置
                        final local = rb.globalToLocal(start.globalPosition);
                        //获取单个标签的高度
                        final double hight = rb.size.height /
                            widget.presenter.getIndexTags().length;
                        print('hight:$hight');
                        //求当前触摸的标签的index
                        final int index = (local.dy / hight).round();
                        print('当前的index:$index');

                        setState(() {
                          if (index <= 0) {
                            _onTap = widget.presenter.getIndexTags().first;
                          } else if (index >=
                              widget.presenter.getIndexTags().length) {
                            _onTap = widget.presenter.getIndexTags().last;
                          } else {
                            _onTap = widget.presenter.getIndexTags()[index];
                          }
                        });
                        jumpToLetter(_onTap);
                      },
                      onVerticalDragUpdate: (details) {
                        //获取滑动点击的屏幕坐标
                        //获取点触摸到的标签的父盒子，indexBar

                        final RenderBox rb = context.findRenderObject();
                        //计算触摸点在父盒子中的相对位置
                        print('position:${details.localPosition}');
                        print('position:${details.localPosition}');
                        var local = rb.globalToLocal(details.globalPosition);
                        print('position:${details.localPosition}');
                        //获取单个标签的高度
                        final double hight = rb.size.height /
                            widget.presenter.getIndexTags().length;
                        print('hight:$hight');
                        //求当前触摸的标签的index
                        final int index = (local.dy / hight).round();
                        print('当前的index:$index');

                        setState(() {
                          if (index <= 0) {
                            _onTap = widget.presenter.getIndexTags().first;
                          } else if (index >=
                              widget.presenter.getIndexTags().length) {
                            _onTap = widget.presenter.getIndexTags().last;
                          } else {
                            _onTap = widget.presenter.getIndexTags()[index];
                          }
                        });
                        jumpToLetter(_onTap);
                      },
                      onVerticalDragEnd: (details) {},
                      child: Padding(
                          padding: EdgeInsets.only(
                              top: ScreenUtil().setHeight(1),
                              bottom: ScreenUtil().setHeight(1)),
                          child: Container(
                              // color: Colors.blueAccent,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(80),
                                color: _onTap == letter
                                    ? Colours.black.withAlpha(50)
                                    : Colors.transparent,
                              ),
                              width: ScreenUtil().setWidth(30),
                              height: ScreenUtil().setHeight(16),
                              child: Center(
                                  child: Text(
                                letter,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontSize:
                                      ScreenUtil().setSp(Dimens.superfine),
                                  color: _onTap == letter
                                      ? Colours.white
                                      : Colours.darkGray,
                                  fontWeight: Weights.bold,
                                ),
                              ))))))
                  .toList(),
            )));
  }
}

当前的index:19

flutter: itemHight:81.57635467980296

flutter: 高度：1631.5270935960593

flutter: position:Offset(401.3, 523.0) //detail获取的全局坐标

flutter: position:Offset(14.5, 307.0) //detail获取的局部坐标

flutter: position:Offset(14.5, 311.6) //获取indexBar的触摸点全局坐标转换为局部坐标

flutter: hight:16.650976099251963

将IndexBar封装成一个Widegt,此时的全局坐标与局部坐标并不一致，说明此时通过final RenderBox rb = context.findRenderObject();获取的的确是'IndexBar'自身了

所以，导致滑动时，滑动标签项与手势滑动不一致的原因在于context没有真正拿到IndexBar,获取到局部坐标。

参考：

单击字母跳转定位

快速定位

快速滑动定位Demo

siderBar实现

Salmonberry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
字母索引定位，仿联系人列表功能，实现字母A-Z排序
12-17
获取数据首字母，仿照联系人实现A-Z字母排序，实现字母索引定位功能；监听字母滑动，使recycleview滑动到指定位置；
5、Flutter通讯录索引条效果实现
Holothurian
05-05 747
3.然后在ListView.builder中有个controller属性,将我们创建的_scrollController设置给它,此时的_scrollController就相当于代理。4. 接着在IndexBar构造方法调用的地方设置,来到friends_page.dart中.将悬浮检索控件的调用改为。4.来到IndexBar调用处.在回调响应方法中,设置滚动控制器的响应方法。3. 在IndexBar中与拖拽索引控件对应的回调相互联动,设置滚动偏移量。3. 接下来在IndexBar的回调中做逻辑判断处理。
Flutter 城市/通讯录列表字母索引联动效果实现
谢栋的专栏
04-30 6769
在像通讯录，联系人列表，城市选择列表等数据量比较多的长列表页面中国呢，我们经常会留意到产品设计会在页面的右侧区域提供一个竖向的字母索引列表，供用户点击选择快速定位到长列表中的指定索引位置，以便于用户快速定位到自己要筛选的数据，从而提升用户体验，今天我们就以`城市列表`为例，来剖析一下，这样的体验效果如果用`Flutter`来实现
ListView分组和字母导航
07-31
效果还是不错的噢，滚动的时候有分组的挤压效果，右侧字母表导航，Toast提示。这不是ExpendableListView噢，用ListView+AlphabetIndexer辅助类实现，
Swift之“索引”快速定位.zip
08-25
Swift之“索引”快速定位:详细的实现了给TableView新增“索引”数组快速定位查找,按照“首字母”的顺序排列展示数据.
Android 实现带字母索引的侧边栏功能
08-29
主要介绍了Android 实现带字母索引的侧边栏功能,需要的朋友可以参考下
字母A-Z的快速定位滑块的学习研究
一个写代码的胖子的博客
04-17 812
实习时遇到这么一个需求的更改，把一个带字母快速定位的滑块的listview，将其中的滑块显示全部字母a-z改成listview中数据有哪些，就只显示有数据的字母。在网上搜索了一下这个自定义view的实现，发现和项目中实现的代码基本一致，好吧，原来也是从网上百度到直接复制下来的，汗~ 　　 结合项目中的代码和网上的资料，我自己学习分析了一下这个自定义sidebar的实现。先贴上源码,源码参考自：
移动端字母索引定位功能
贵林之恋的博客
05-17 1253
html：&lt;div class="container"&gt; &lt;div class="letter"&gt; &lt;/div&gt; &lt;div class="list"&gt; &lt;/div&gt; &lt;/div&gt; js：        //右侧字母 var letter = ['
Vue + better-scroll 实现移动端字母索引导航功能
08-27
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue + better-scroll 实现移动端字母索引导航功能,需要的朋友可以参考下
ListView快速索引 通讯录快速定位
09-10
仿照微信通讯录 可以根据字母快速定位到对应的联系人
联系人快速索引
11-07
实现像微信上面联系人上面的简单的索引,可以快速定位点击的字母,并显示对应字母拼音开头的联系人
联系人列表快速索引
07-19
效果和微信联系人列表一样，点击右侧字母快速定位到对应的名字
Android自定义View实现通讯录字母索引（仿微信通讯录）
01-05
一、效果：我们看到很多软件的通讯录在右侧都有一个字母索引功能，像微信，小米通讯录，QQ,还有美团选择地区等等。这里我截了一张美团选择城市的图片来看看； 我们今天就来实现图片中右侧模块的索引功能，包括触摸...
關鍵字library、part、part of和import、export的作用
Salmonberry的博客
07-02 5446
import toolUtil.dart; import 'dart:math'; import 'lib/student/student.dart' as Student 使用的情景： 儅需要使用一個庫時，通過import導入一個庫，import 所用庫的路徑(string) 儅使用的庫名相同時，可以使用關鍵字as來定義一個自定義庫名 限制： toolUtil.dart 與 math.dart...
Flutter手势操作 ---全局坐标与局部坐标的获取
Salmonberry的博客
06-11 5139
手势操作 全局坐标与局部坐标 在GestureDetector中有两个重要属性值globalPosition和localPosition，两者都是Offset对象。 globalPosition就像它的命名表示当前手势触点在**全局坐标系位置与对应组件顶点坐标的偏移量（dx，dy）； localPosition则就表示当前手势触点在对应组件坐标系位置与对应组件顶点坐标的偏移量（dx，dy）**。 例如如下代码中，为Container设置了GestureDetector手势监听，在update回调中获取up
Android Studio 打開 **Open in DevTools**時，exit code 65
Salmonberry的博客
07-03 1043
Android Studio 打開 Open in DevTools時，報錯： > No active package devtools. pub finished with exit code 65 解決方法： Terminal $ flutter packages pub global activate devtools
Android Emulator "Error connecting to the service protocol:HttpException"
Salmonberry的博客
05-15 962
issues Issues: code能跑动，但跑完后就自动报如上得错误。 Solve: why 新得模拟器：版本号——Q存在问题 solve:通过Device Manager创建版本号为Pie的模拟器，可正常运行 参考资料：Fix Flutter Debug Error on Android Emulator “Error connecting to the service proto...
那些年儿，遇到的flutter问题
Salmonberry的博客
05-31 158
#0 code能跑动，但跑完后就自动报如上得错误。 解决方法: why 新得模拟器：版本号——Q存在问题 solve:通过Device Manager创建版本号为Pie的模拟器，可正常运行 参考资料： Fix Flutter Debug Error on Android Emulator “Error connecting to the service protocol:HttpExc...
html 字母索引列表
最新发布
09-22
可以使用锚点标签将这些唯一标识符与字母索引列表项进行关联，从而实现快速导航和定位功能。 总的来说，HTML字母索引列表是一种简单但实用的导航工具，可以有效地帮助读者在长篇文本或大型文档中快速浏览和定位特定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值