Flutter滑动组件插件dh_slider的使用

Flutter滑动组件插件dh_slider的使用

dh_slider

`dh_slider` 是一个方便使用的滑块组件，支持设置滑块的拇指和轨道的颜色和图片。

如何使用

导入dh_slider

import 'package:dh_slider/dh_slider.dart';

使用颜色设置滑块

DHSlider(
    thumbBorderSide: BorderSide.none, // 移除边框
    thumbColor: Colors.redAccent, // 设置拇指颜色
    trackHeight: 3, // 轨道高度
    margin: EdgeInsets.only(left: 10, right: 10, top: 20), // 边距
    value: slider, // 当前值
    onChanged: (double value) { // 滑块值变化时的回调
      setState(() {
        slider = value;
      });
    }
)

使用图片设置滑块

FutureBuilder(
  future: sliderFuture, // 图片加载的Future
  builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
    return DHSlider(
      value: slider, // 当前值
      trackImage: snapshot.data, // 轨道背景图
      trackHeight: 13, // 轨道高度
      activeTrackColor: Colors.transparent, // 活动轨道透明
      inactiveTrackColor: Colors.transparent, // 非活动轨道透明
      disabledActiveTrackColor: Colors.transparent, // 禁用活动轨道透明
      disabledInactiveTrackColor: Colors.transparent, // 禁用非活动轨道透明
      thumbColor: Colors.white, // 拇指颜色
      disabledThumbColor: Colors.white, // 禁用拇指颜色
      enabledThumbRadius: 12, // 拇指半径
      margin: EdgeInsets.only(left: 10, right: 10, top: 30), // 边距
      thumbBorderSide: BorderSide(
        width: 0.6,
        color: Colors.red, // 拇指边框颜色
      ),
      onChanged: (value) { // 滑块值变化时的回调
        setState(() => slider = value);
      },
      min: 0, // 最小值
      max: 1, // 最大值
    );
  }
)

添加标记

DHSliderTrackShape(
  alignThumbCenter: false, // 不对齐拇指中心
  marks: ['0', '35', '70', '100'], // 标记数组
  activeMarkStyle: TextStyle(color: Colors.white, fontSize: 14), // 活动标记样式
  inactiveMarkStyle: TextStyle(color: Color(0xFF7F7F7F), fontSize: 12), // 非活动标记样式
  disabledActiveMarkStyle: TextStyle(color: Colors.red, fontSize: 14), // 禁用活动标记样式
  disabledInactiveMarkStyle: TextStyle(color: Colors.brown, fontSize: 12), // 禁用非活动标记样式
)

添加文本到拇指

DHThumbShape(
    borderSide: BorderSide(width: 4, color: Color(0xFFFAAA00)), // 拇指边框
    label: "value", // 文本标签
    enabledThumbRadius: 21, // 拇指半径
    labelStyle: TextStyle(color: Colors.cyan, fontSize: 14) // 文本样式
)

完整示例代码

import 'dart:async';
import 'dart:math';
import 'dart:ui' as ui;

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DHSlider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SliderPage(title: 'DHSlider'),
    );
  }
}

class SliderPage extends StatefulWidget {
  SliderPage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _SliderPageState extends State<SliderPage> {
  double slider = 0.0;

  Future<List<ui.Image>>? sliderFuture;

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

    sliderFuture = Future.wait([
      getImageFuture(AssetImage("images/slider_bck.png")),
      getImageFuture(
          ResizeImage(AssetImage("images/thumb.png"), width: 24, height: 24))
    ]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(horizontal: 30),
        children: [
          _getIndicatorSlider(),
          _getTrackImageSlider(),
          _getCustomSlider(),
        ],
      ),
    );
  }

  /// thumb显示气泡指示器样式
  Widget _getIndicatorSlider() {
    return DHSlider(
        thumbBorderSide: BorderSide.none,
        thumbColor: Colors.redAccent,
        trackHeight: 4,
        margin: EdgeInsets.only(left: 10, right: 10, top: 80),
        value: slider,
        label: "$slider",
        indicator: Indicator(rectRadius: 10, labelPadding: 18),
        indicatorStyle: IndicatorStyle(
            backgroundColor: Colors.red,
            shadowColor: Colors.black,
            elevation: 12.0,
            reverse: true,
            angle: pi),
        showValueIndicator: ShowValueIndicator.always,
        onChangeEnd: (double value) {
          print("onChangeEnd: $value");
          setState(() {
            slider = value;
          });
        },
        onChanged: (double value) {
          setState(() {
            slider = value;
          });
          print("onChanged: $value");
        });
  }

  /// track 是图片背景样式
  Widget _getTrackImageSlider() {
    return FutureBuilder(
      future: sliderFuture,
      builder: (BuildContext context, AsyncSnapshot<List<ui.Image>> snapshot) {
        return DHSlider(
          value: slider,
          trackHeight: 12,
          trackImage: snapshot.data?[0],
          activeTrackColor: Colors.transparent,
          inactiveTrackColor: Colors.transparent,
          disabledActiveTrackColor: Colors.transparent,
          disabledInactiveTrackColor: Colors.transparent,
          thumbImage: snapshot.data?[1],
          enabledThumbRadius: 10,
          margin: EdgeInsets.only(left: 10, right: 10, top: 80),
          thumbBorderSide: BorderSide(
            width: 0.6,
            color: Colors.red,
          ),
          onChanged: (value) {
            print("onChange: $value");
            setState(() => slider = value);
          },
          onChangeEnd: (value) {
            print("onChangeEnd: $value");
            setState(() => slider = value);
          },
          min: 0,
          max: 1,
        );
      },
    );
  }

  /// 自定义样式
  Widget _getCustomSlider() {
    return DHSlider(
      margin: const EdgeInsets.only(top: 80),
      value: slider,
      trackHeight: 46,
      activeTrackColor: Color(0xFFFAAA00),
      inactiveTrackColor: Color(0xFFF1F1F1),
      thumbColor: Colors.white,
      disabledThumbColor: Colors.yellow,
      thumbShape: DHThumbShape(
          borderSide: BorderSide(width: 4, color: Color(0xFFFAAA00)),
          label: "${(slider * 100).toInt()}",
          enabledThumbRadius: 21,
          labelStyle: TextStyle(color: Colors.cyan, fontSize: 14)),
      trackShape: DHSliderTrackShape(
        alignThumbCenter: false,
        marks: ['0', '35', '70', '100'],
        activeMarkStyle: TextStyle(color: Colors.white, fontSize: 14),
        inactiveMarkStyle: TextStyle(color: Color(0xFF7F7F7F), fontSize: 12),
        disabledActiveMarkStyle: TextStyle(color: Colors.red, fontSize: 14),
        disabledInactiveMarkStyle: TextStyle(color: Colors.brown, fontSize: 12),
      ),
      onChanged: (value) {
        setState(() => slider = value);
      },
      onChangeEnd: (value) {
        setState(() => slider = value);
      },
      min: 0.0,
      max: 1.0,
    );
  }

  Future<ui.Image> getImageFuture(
    ImageProvider provider, {
    ImageConfiguration config = ImageConfiguration.empty,
  }) {
    Completer<ui.Image> completer = Completer<ui.Image>();
    ImageStreamListener? listener;
    ImageStream stream = provider.resolve(config);
    listener = ImageStreamListener((ImageInfo frame, bool sync) {
      final ui.Image image = frame.image;
      completer.complete(image);
      stream.removeListener(listener!);
    });
    stream.addListener(listener);
    return completer.future;
  }
}

更多关于Flutter滑动组件插件dh_slider的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


dh_slider 是一个用于 Flutter 的滑动组件插件，通常用于创建自定义的滑动条或滑块组件。由于 dh_slider 不是 Flutter 官方提供的插件，因此它的具体用法可能会根据插件的不同版本和实现方式有所不同。以下是一个基本的示例，展示如何使用一个典型的滑动组件插件。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 dh_slider 插件的依赖。假设该插件已经发布在 pub.dev 上，你可以这样添加：

dependencies:
  flutter:
    sdk: flutter
  dh_slider: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 dh_slider 插件：

import 'package:dh_slider/dh_slider.dart';

3. 使用 DhSlider

以下是一个简单的示例，展示如何使用 DhSlider 组件：

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _sliderValue = 50.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DhSlider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Slider Value: ${_sliderValue.toStringAsFixed(1)}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            DhSlider(
              value: _sliderValue,
              min: 0.0,
              max: 100.0,
              onChanged: (double value) {
                setState(() {
                  _sliderValue = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyHomePage(),
));
回到顶部