“This is the 11th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Hi 👋

  • Wechat: RyukieW
  • Wechat official account: LabLawliet
  • 📦 Archive of technical articles
  • 🐙 making
My personal project Minesweeper Elic Endless Ladder Dream of books Privacy Access Record
type The game financial tool
AppStore Elic Umemi Privacy Access Record

More columns:

The independent development of Lawliet

Lawliet’s iOS garden party

Lawliet’s underlying iOS lab

Lawliet’s iOS Reverse lab

Lawliet’s brush book

Lawliet’s Flutter Lab

Flutter tips | Gesture handling and CLAMP functions from side index bar encapsulation

Flutter tips | Widget initialization method rewrite & chain call & Sort

Flutter tips | Assertion through the style of cells

preface

In a list-view development scenario, a quick slide to a specified section by index is a common feature. So how do we achieve this function in Flutter? This article will take the contact page as an example.

Analysis of the ListView

In iOS development we often use open Func scrollToItem(at indexPath: indexPath, at scrollPosition: UICollectionView ScrollPosition, animated: Bool) this kind of method to realize the TableView and CollectionView scroll to specify the location of the effect.

The Flutter ListView does not have this grouping concept, nor does it provide a convenient way to do so, but there are basic apis that can provide some ideas.

ScrollController

We can bind a ScrollController to the ListView, which acts as a proxy for iOS development, but is a bit richer.

Two apis are provided to scroll to the specified location, but more specifically, you can click into the header file to view the comments, which I won’t go into here.

animateTo

With animation

  Future<void> animateTo(
    double offset, {
    required Duration duration,
    required Curve curve,
  }) async {
    assert(_positions.isNotEmpty, 'ScrollController not attached to any scroll views.');
    await Future.wait<void>(<Future<void> > [for (int i = 0; i < _positions.length; i += 1) _positions[i].animateTo(offset, duration: duration, curve: curve),
    ]);
  }
Copy the code

jumpTo

There is no animation

  void jumpTo(double value) {
    assert(_positions.isNotEmpty, 'ScrollController not attached to any scroll views.');
    for (final ScrollPosition position in List<ScrollPosition>.from(_positions))
      position.jumpTo(value);
  }
Copy the code

Here, to slide the address book to the head of the group, select jumpTo.

Calculate the offset of each group in advance

class _ContactsPageState extends State<ContactsPage> {
  final List<Friends> _contacts = [];// Contact the population group
  final List<Friends> _systems = []; // Top system entry array
  final List<String> _indexs = []; / / index
  ScrollController _scroller = ScrollController();
  Map<int.double> _indexOffsets = {}; // Offset Map
  
  @override
  void initState() {
    super.initState();

    double offsetY = 0; _contacts .. addAll(friendsData) .. addAll(friendsData) .. sort((a, b) {if (a.indexLetter == null || b.indexLetter == null) {
          return 0;
        }
        returna.indexLetter! .compareTo(b.indexLetter!) ; }); _systems .addAll(friendsHeaderData); offsetY = ContactCell.baseCellHeight * friendsHeaderData.length.toDouble();// The top offset of the first contact group is the total height of the top system entry

    var index = 0;
    
    _contacts.forEach((element) {
      if(element.indexLetter ! =null && _indexs.contains(element.indexLetter) == false) { _indexs.add(element.indexLetter!) ; _indexOffsets.addAll({ index : offsetY }); index +=1;
        // Base Cell height, plus top group header height
        offsetY += ContactCell.baseCellHeight + ContactCell.indexHeight;
      }
      else {
        // Base Cell heightoffsetY += ContactCell.baseCellHeight; }}); }... }Copy the code

IndexBar event handling

IndexBar(
    dataSource: _indexs,
    callBack: (index, title) {
        if(_indexOffsets[index] ! =null) { _scroller.jumpTo(_indexOffsets[index]!) ; }},)Copy the code

Complete project code

GitHub