Flutter标记滚动视图插件mark_scroll_view的使用

Flutter标记滚动视图插件mark_scroll_view的使用

Mask ScrollView 是一个高性能的A-Z列表视图，具有灵活且高效的使用方式。

展示

开始使用

首先，在你的项目中引入 mark_scroll_view 包：

import 'package:mark_scroll_view/mark_scroll_view.dart';

使用方法

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 mark_scroll_view 插件。

import 'dart:math';

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:mark_scroll_view/mark_scroll_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Mask Scroll View'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  // 数据
  List<String> dataList = [];
  Map<String, List<String>> showMap = {};
  List<MarkScrollModel<String>> modelList = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    addWords();
  }

  void decAdd(String value) {
    if (dataList.contains(value)) {
      String newValue = all[Random().nextInt(all.length - 1)];
      decAdd(newValue);
    } else {
      dataList.add(value.toLowerCase());
    }
  }

  void addWords() {
    dataList.clear();
    showMap.clear();
    modelList.clear();
    for (int i = 0; i < 50; i++) {
      String value = all[Random().nextInt(all.length - 1)];
      decAdd(value);
    }
    handleList();
  }

  void handleList() {
    dataList.sort((a, b) => a.compareTo(b));
    for (String value in dataList) {
      if (showMap.keys.contains(value[0])) {
        showMap[value[0]]!.add(value);
      } else {
        showMap[value[0]] = [value];
      }
    }

    showMap.forEach((key, value) {
      MarkScrollModel<String> model = MarkScrollModel(tag: key, children: value);
      modelList.add(model);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: MarkScrollView<String>(
        dataList: modelList,
        susBuilder: (context, index) {
          return Container(
            color: Theme.of(context).primaryColorLight,
            padding: const EdgeInsets.all(12),
            child: Text(
              modelList[index].tag.toUpperCase(),
            ),
          );
        },
        itemBuilder: (context, mainIndex, index) {
          String text = modelList[mainIndex].children[index];
          text = '${text[0].toUpperCase()}${text.substring(1)}';
          return Container(
            height: 60,
            padding: const EdgeInsets.only(left: 12),
            alignment: Alignment.centerLeft,
            color: Theme.of(context).secondaryHeaderColor,
            child: Text(text),
          );
        },
        markBuilder: (context, index) {
          return Text(
            modelList[index].tag.toUpperCase(),
          );
        },
        markBarOption: const MarkBarOption(
          defaultColor: Colors.white,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            addWords();
          });
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}