效果图：

示例代码

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_easy_navigation_list/flutter_easy_navigation_list.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  @override
  void initState() {
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: ListText(),
      ),
    );
  }
}

class ListText extends StatefulWidget {
  ListText({Key? key}) : super(key: key);

  @override
  _ListTextState createState() => _ListTextState();
}

class _ListTextState extends State<ListText> {

  /// 索引字符列表长度需要等于索引组件长度
  /// 索引字符列表
  late List<String> naList = [];
  /// 索引内容列表
  late List<Widget> chList = [];

  @override
  void initState() {
    super.initState();
    
    /// 初始化索引字符列表和索引内容列表
    for (int i = 0; i < 27; i++) {
      naList.add(i == 26
          ? String.fromCharCode(35)
          : String.fromCharCode(i + 65));
      int num = Random().nextInt(10) + 3;
      List<Widget> cChList = [];
      for (int j = 0; j < num; j++) {
        cChList.add(
          Container(
            margin: EdgeInsets.only(
              bottom: 10,
              left: 16,
              right: 16,
            ),
            width: window.physicalSize.width,
            color: Colors.green,
            height: 50,
            alignment: Alignment.centerLeft,
            child: Text(
              naList[i] + ':' + j.toString(),
            ),
          ),
        );
      }
      chList.add(
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: cChList,
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {

    /// 使用示例
    ///
    /// Usage example
    return Container(
      color: Colors.blue,
      /// 使用导航组件
      child: AutoCharacterNavigatorList(
        // alphabetDirection: Axis.horizontal,
        alphabetChildrenPosition: Position(
          right: 16,
          top: 30,
        ),
        alphabetChildrenStyle: AlphabetChildrenStyle(
          unSelectBackgroundColor: Colors.deepOrange,
          margin: EdgeInsets.zero,
          totalWidth: 16,
          // totalHeight: 400,
          alphabetDirection: Axis.vertical,
        ),
        childrenNavigator: naList,
        children: chList,
      ),
    );
  }
}

效果介绍：

当列表滑动时会自动计算高度并根据滑动位置自动改变索引列表的选择位置

同理当索引列表信息发生变化后内容列表会自动滑动至指定位置

使用方法：

引用dart包：

使用 dart命令添加：

dart pub add flutter_easy_navigation_list

使用 flutter 命令添加：

flutter pub add flutter_easy_navigation_list

在pubspec.yaml文件中添加：

dependencies:
  flutter_easy_navigation_list: ^0.0.4

组件属性介绍

组件内各项属性都有中英双注释，比较好理解

入口属性介绍

索引样式属性介绍

补充说明：

• 因为内容list列表为以组件的形式传入，所以在自定义内容样式时只需在创建时定义好就行

• 索引组件在长度超过给定的距离后允许滑动

• 单个索引不限字符、宽度、高度，定义好就行。

• 如果觉得使用不便或是有什么好的建议可以私信我。

• 遇到bug也请务必联系我