Flutter多指滑动选择器插件multi_thumb

Flutter多指滑动选择器插件multi_thumb_slider的使用

此README描述了该包。如果你将此包发布到pub.dev，则此README的内容将出现在你的包的首页。

简介

此Flutter插件是一个可自定义的滑块组件，支持超过两个滑块。它提供了一个易于实现的滑块，其中多个滑块代表从0到1的值范围。滑块可以通过自定义背景组件和自定义滑块构建器进行自定义。它是一个强大的工具，用于创建直观且交互性强的用户体验，例如在应用程序中实现渐变生成器。

重要提示

该插件仅支持超过两个滑块的滑块。对于两个或更少滑块的情况，应使用原生的Slider和RangeSlider组件。

特性

不同用例可以通过使用该插件来覆盖：

线性渐变生成器	越界移动其他滑块	越界停止在下一个滑块

重要提示

使用“越界移动”行为时，如果滑块数量较多，可能会影响应用性能。请谨慎使用此行为。

使用方法

该插件提供了两种构造函数：MultiThumbSlider 和 MultiThumbSlider.distributed。

MultiThumbSlider 接受 initialSliderValues 参数，用于在特定值处创建滑块。
MultiThumbSlider.distributed 接受一个大于2的整数作为 initialThumbAmount 参数。

请阅读API文档以详细了解不同参数如何协同工作以及如何详细使用 MultiThumbSliderController。

示例代码

MultiThumbSlider(
  initalSliderValues: [0.0, 0.1, 0.2, 0.9, 1.0], // 初始滑块位置
  valuesChanged: (List<double> values) {
    // 每当拖动任何滑块时，都会通过 valuesChanged 传递一个包含所有滑块值的列表
  },
  // 可选：滑块越界行为，默认为 ThumbOverdragBehaviour.stop
  overdragBehaviour: ThumbOverdragBehaviour.move,
  // 可选：锁定第一个和最后一个滑块的行为，默认为 ThumbLockBehaviour.stop
  lockBehaviour: ThumbLockBehaviour.none,
  // 可选：滑块自定义构建器函数
  thumbBuilder: (BuildContext context, int index) => Text("$index"),
  // 可选：滑块的背景组件
  background: Container(
    height: 10,
    decoration: BoxDecoration(
      color: Colors.red,
    ),
  ),
  // 可选：组件的高度，默认为 48
  height: 72,
  // 可选：MultiThumbSliderController 可用于在构建后控制滑块。例如添加/删除滑块，获取当前值，移动滑块等
  controller: MultiThumbSliderController()
)

Bug报告或功能请求

如果您遇到任何问题，请随时打开一个issue。如果您觉得库缺少某个功能，请在GitHub上提出建议，希望我能有时间查看。Pull请求也是受欢迎的。

示例代码

import 'package:flutter/material.dart';
import 'package:multi_thum_slider/usecases/gradient_slider_usecase.dart';
import 'package:multi_thum_slider/usecases/overdrag_cross_usecase.dart';
import 'package:multi_thum_slider/usecases/overdrag_move_usecase.dart';
import 'package:multi_thum_slider/usecases/overdrag_stop_usecase.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) => const MaterialApp(
        home: Home(),
      );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: const Text('Multi Thumb Slider'),
      ),
      body: ListView(
        children: [
          Container(
              height: 36,
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              color: Colors.grey[300],
              child: const Text(
                "Start and End thumbs locked",
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                textAlign: TextAlign.left,
              )),
          ...ListTile.divideTiles(color: Colors.grey[500], tiles: [
            ListTile(
              title: const Text("Overdrag Stop"),
              subtitle: const Text("Build with initalSliderValues"),
              onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const OverdragStopUsecase.locked())),
            ),
            ListTile(
              title: const Text("Overdrag Move"),
              subtitle: const Text("Build with initialThumbAmount"),
              onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const OverdragMoveUsecase.locked())),
            ),
            ListTile(
              title: const Text("Overdrag Cross"),
              subtitle: const Text("Build with initialThumbAmount"),
              onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const OverdragCrossUsecase.locked())),
            ),
          ]),
          Container(
              height: 36,
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              color: Colors.grey[300],
              child: const Text(
                "Start and End thumbs not locked",
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                textAlign: TextAlign.left,
              )),
          ...ListTile.divideTiles(color: Colors.grey[500], tiles: [
            ListTile(
              title: const Text("Overdrag Stop"),
              subtitle: const Text("Build with initalSliderValues"),
              onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const OverdragStopUsecase.unlocked())),
            ),
            ListTile(
              title: const Text("Overdrag Move"),
              subtitle: const Text("Build with initialThumbAmount"),
              onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const OverdragMoveUsecase.unlocked())),
            ),
            ListTile(
              title: const Text("Overdrag Cross"),
              subtitle: const Text("Build with initialThumbAmount"),
              onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const OverdragCrossUsecase.unlocked())),
            ),
          ]),
          Container(
              height: 36,
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              color: Colors.grey[300],
              child: const Text(
                "Custom usecases",
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                textAlign: TextAlign.left,
              )),
          ...ListTile.divideTiles(color: Colors.grey[500], tiles: [
            ListTile(
              title: const Text("Gradient Slider"),
              subtitle: const Text(
                  "Example of a gradient editor that uses the MultiThumbSlider to edit the gradient stops"),
              onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => GradientSliderUsecase())),
            ),
          ]),
        ],
      ));
}

更多关于Flutter多指滑动选择器插件multi_thumb_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•3 天前

更多关于Flutter多指滑动选择器插件multi_thumb_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter中使用multi_thumb_slider插件的示例代码。这个插件允许你在一个滑动条上使用多个滑块（拇指）进行选择。首先，你需要在你的pubspec.yaml文件中添加这个依赖项：

dependencies:
  flutter:
    sdk: flutter
  multi_thumb_slider: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个完整的示例代码，展示了如何使用MultiThumbSlider：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multi Thumb Slider Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MultiThumbSliderScreen(),
    );
  }
}

class MultiThumbSliderScreen extends StatefulWidget {
  @override
  _MultiThumbSliderScreenState createState() => _MultiThumbSliderScreenState();
}

class _MultiThumbSliderScreenState extends State<MultiThumbSliderScreen> {
  final List<double> initialPositions = [0.2, 0.5, 0.8];
  List<double> positions = List.from(initialPositions);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Thumb Slider Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Multi Thumb Slider Example:'),
            SizedBox(height: 16.0),
            MultiThumbSlider(
              values: positions,
              min: 0.0,
              max: 1.0,
              numThumbs: 3,
              onValuesChanged: (List<double> newValue) {
                setState(() {
                  positions = newValue;
                });
              },
              thumbStyle: ThumbStyle(
                size: 24.0,
                color: Colors.blue,
                activeColor: Colors.lightBlue,
              ),
              trackStyle: TrackStyle(
                height: 8.0,
                color: Colors.grey.withOpacity(0.5),
                activeColor: Colors.blue.withOpacity(0.5),
              ),
            ),
            SizedBox(height: 16.0),
            Text('Current Values: ${positions.join(", ")}'),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含MultiThumbSlider的简单Flutter应用。MultiThumbSlider的values属性设置了初始滑块的位置，min和max属性设置了滑动条的最小和最大值，numThumbs属性设置了滑块的数量。onValuesChanged回调函数在滑块位置改变时被调用，并更新状态中的positions列表。

ThumbStyle和TrackStyle类允许你自定义滑块和滑动条的样式。在这个例子中，我们设置了滑块的大小、颜色和活动颜色，以及滑动条的高度、颜色和活动颜色。

运行这个应用后，你应该能看到一个包含三个滑块的滑动条，并且可以在滑动条上拖动这些滑块来改变它们的位置。当前滑块的位置会显示在滑动条下方的文本中。