Flutter图片轮播插件thumb_slider的使用

Flutter 图片轮播插件 Thumb Slider 的使用

安装 💻

为了开始使用 Thumb Slider，你需要在你的机器上安装 Flutter SDK。

在 pubspec.yaml 文件中添加 thumb_slider 依赖：

dependencies:
  thumb_slider: ^0.1.0-dev.1

然后运行以下命令来安装它：

flutter packages get

连续集成 🤖

Thumb Slider 配备了一个由 Very Good Workflows 提供支持的 GitHub Actions 工作流。你可以根据需要添加自己的 CI/CD 解决方案。默认情况下，每次拉取请求或推送时，CI 会格式化、检查代码风格并测试代码。这确保了代码的一致性和正确性。该项目使用 Very Good Analysis 来执行严格的分析选项，并使用 Very Good Workflows 来强制执行代码覆盖率。

运行测试 🧪

对于新用户，首先安装 very_good_cli：

dart pub global activate very_good_cli

要运行所有单元测试：

very_good test --coverage

要查看生成的覆盖率报告，可以使用 lcov：

# 生成覆盖率报告
genhtml coverage/lcov.info -o coverage/

# 打开覆盖率报告
open coverage/index.html

使用示例

下面是一个完整的示例，展示了如何使用 Thumb Slider 插件来创建一个简单的滑块。

// Copyright (c) 2022 Dewin J. Martínez
//
// This software is released under the MIT License.
// https://opensource.org/licenses/MIT

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

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  var _value = 1.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Thumb Slider 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 ThumbSlider 创建滑块
            ThumbSlider(
              value: _value, // 当前滑块的值
              thumbHeight: 32, // 滑块指针的高度
              thumbWidth: 40, // 滑块指针的宽度
              minValue: 1, // 最小值
              maxValue: 200, // 最大值
              onChanged: (value) { // 值改变时的回调函数
                setState(() {
                  _value = value;
                });
              },
            ),
            // 显示当前滑块的值
            Text('当前值是: $_value'),
          ],
        ),
      ),
    );
  }
}