Flutter滚动联动插件mr_scrollmate的使用

Flutter滚动联动插件mr_scrollmate的使用

Language: 简体中文

<Mrscrollmate 是一个库，允许你在单个屏幕上创建一个或多个类似桌面风格的滚动条，每个滚动条只绑定到其自身的对象，并放置在屏幕上的特定位置。>

如何使用它

你可以像使用普通Widget一样将此滚动条放在Row中，并指定与该ScrollView对象关联的控制器。

Row(
    children: [
      Container(
          width: 300,
          height: 700,
          child: MyDataTable(
            gridController: gridController,
          )),
      Mrscrollmate(
        thumbShape:BoxDecoration(borderRadius: BorderRadius.circular(20)),
        trackHeight: 700,
        topIcon: const Icon(Icons.abc),
        scrollArrowButton: true,
        thumbSpeed: 0.358,
        tableScrollController: gridController,
        ),
      ],
),

自定义

你可以将滚动条放置在屏幕的左右两侧。它作为一个Widget工作，因此我们只需要为其提供滚动控制器即可。

Mrscrollmate(  
      thumbShape:BoxDecoration(borderRadius:BorderRadius.circular(20)),//滚动条装饰
      trackHeight: 700,
      topIcon: const Icon(Icons.abc), //更改顶部箭头图标
      scrollArrowButton: true,
      thumbSpeed: 0.358, //增加或减少滚动速度
      tableScrollController: gridController, //给定表格、ListView的滚动控制器
    ),

要设置滑块宽度，可以设置垂直轨道高度和垂直滚动条速度。滚动条的大小不是自动确定的，所以我们需要为ScrollView对象提供特定的尺寸。如果ScrollView对象没有可滚动的地方，则滚动条不会显示在屏幕上。

你可以设置滚动条的颜色，或者完全自定义它们的装饰。

参数

完整示例

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:data_table_2/data_table_2.dart';
import 'package:mr_scrollmate/mr_scrollmate.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ScrollController gridController = ScrollController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PaginatedDataTable2 示例'),
        ),
        body: Row(
          children: [
            Container(
                width: 300,
                height: 700,
                child: MyDataTable(
                  gridController: gridController,
                )),
            Mrscrollmate(
              thumbShape: BoxDecoration(
                  borderRadius: BorderRadius.circular(20), color: Colors.amber),
              trackHeight: 700,
              topIcon: const Icon(Icons.abc),
              scrollArrowButton: true,
              thumbSpeed: 0.358,
              tableScrollController: gridController,
            ),
          ],
        ),
      ),
    );
  }
}

class MyDataTable extends StatefulWidget {
  final ScrollController gridController;

  const MyDataTable({super.key, required this.gridController});

  [@override](/user/override)
  _MyDataTableState createState() => _MyDataTableState();
}

class _MyDataTableState extends State<MyDataTable> {
  final List<Map<String, dynamic>> _data = [
    {'id': 1, 'name': 'John Doe', 'age': 25},
    {'id': 2, 'name': 'Jane Smith', 'age': 30},
    {'id': 3, 'name': 'Bob Johnson', 'age': 22},
    // 添加更多数据
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PaginatedDataTable2(
      rowsPerPage: 50,
      scrollController: widget.gridController,
      header: Text('示例数据表'),
      columns: [
        DataColumn2(
          label: Text('ID'),
          size: ColumnSize.S,
        ),
        DataColumn2(
          label: Text('姓名'),
          size: ColumnSize.L,
        ),
        DataColumn2(
          label: Text('年龄'),
          size: ColumnSize.S,
        ),
      ],
      source: MyDataTableSource(_data),
      // 添加任何其他自定义选项
    );
  }
}

class MyDataTableSource extends DataTableSource {
  final List<Map<String, dynamic>> _data;

  MyDataTableSource(this._data);

  [@override](/user/override)
  DataRow getRow(int index) {
    final rowData = _data[index];
    return DataRow.byIndex(
      index: index,
      cells: [
        DataCell(Text('${rowData['id']}')),
        DataCell(Text('${rowData['name']}')),
        DataCell(Text('${rowData['age']}')),
      ],
    );
  }

  [@override](/user/override)
  int get rowCount => _data.length;

  [@override](/user/override)
  bool get isRowCountApproximate => false;

  [@override](/user/override)
  int get selectedRowCount => 0;
}