Flutter滚动增强插件scroll_mate的使用

Flutter滚动增强插件scroll_mate的使用

简介

scroll_mate 是一个用于同步多个滚动控制器并定义显示行数的Flutter插件。通过这个插件，你可以轻松实现多个滚动视图的同步滚动，并且可以控制每一屏显示多少行内容。

预览

快速开始

scroll_mate 插件允许你处理多个滚动控制器的同步滚动。所有行的滚动会同时开始和结束。你可以决定在屏幕上显示多少行。

功能特性

• 多个滚动控制器同步工作
• 可以定义显示的行数
• 支持泛型类型，并且可以自定义显示的Widget

属性

ScrollMateModel 属性

ScrollMateItem 属性

使用示例

以下是一个完整的示例代码，展示了如何使用 scroll_mate 插件来创建一个包含多个滚动视图的页面，并且这些视图会同步滚动。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll Mate',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,
        appBarTheme: const AppBarTheme(
          titleTextStyle: TextStyle(
            fontSize: 20,
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
          backgroundColor: Colors.white,
          elevation: 0,
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: const InterestView(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Interests'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 标题
            const Padding(
              padding: EdgeInsets.only(bottom: 15, left: 20, top: 15),
              child: Text(
                'Interests',
                style: TextStyle(
                  fontSize: 20,
                  color: Color(0xff4c546d),
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            // 滚动视图
            Expanded(
              child: ScrollMateList<String>(
                scrollMateModel: ScrollMateModel(
                  lineCount: 4, // 每屏显示4行
                  items: Interests.list, // 数据源
                  title: buildInterestTitle(), // 自定义标题
                  builder: (String title, int index) {
                    return ScrollMateItem(
                      rightMargin: 20, // 右边距
                      leftMargin: 20, // 左边距
                      item: ScrollMateChip(
                        title: title.toString(), // 显示的文本
                        index: index, // 索引
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 构建兴趣标题
  Widget buildInterestTitle() {
    return const SizedBox(
      height: 40,
      child: Center(
        child: Text(
          'Your Interests',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.grey,
          ),
        ),
      ),
    );
  }
}

// 自定义的ScrollMateItem
class ScrollMateChip extends StatelessWidget {
  final String title;
  final int index;

  const ScrollMateChip({super.key, required this.title, required this.index});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      padding: const EdgeInsets.symmetric(horizontal: 20),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: const Color(0xff4c546d),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

// 模拟的兴趣列表数据
class Interests {
  static List<String> list = [
    'Reading',
    'Traveling',
    'Cooking',
    'Gaming',
    'Photography',
    'Music',
    'Sports',
    'Programming',
    'Art',
    'Dancing',
  ];
}

其他用法

你还可以创建自己的滚动控制器组件。只需要在 initState 中调用 ScrollMateController.instance.initController 方法，并传入你需要同步的 ScrollController 列表。

final scrollController = ScrollController();
final scrollController2 = ScrollController();

[@override](/user/override)
void initState() {
  super.initState();
  ScrollMateController.instance.initController(
    scrollControllers: [scrollController, scrollController2],
  );
}