Flutter滑动条组件插件syncfusion_flutter_sliders的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter滑动条组件插件syncfusion_flutter_sliders的使用

介绍

Syncfusion Flutter Sliders 是一个原生用Dart编写的Flutter包，用于创建高度交互和UI丰富的滑块小部件，以实现Flutter应用程序中的过滤目的。这个库可以用来创建三种不同类型的滑块：普通滑块（Slider）、范围滑块（Range Slider）和范围选择器（Range Selector）。这些滑块支持数字和日期值、工具提示、标签和刻度等功能。

免责声明

这是一个商业包。要使用此包，您需要拥有 Syncfusion® 商业许可证或 免费的 Syncfusion® 社区许可证。有关更多详细信息，请参阅 LICENSE 文件。

功能概述

滑块（Slider）功能

  • 数值和日期支持：选择数值或日期。
  • 标签：为日期和数值范围添加标签，并根据需求自定义格式。
  • 刻度和分隔线：基于间隔显示刻度和分隔线。
  • 工具提示：显示所选值的工具提示。
  • 拇指图标支持：接受自定义的小部件如图标或文本作为拇指。
  • 离散选择：仅允许选择离散的数值或日期。
  • 高度可定制化：提供广泛的选项进行自定义。
  • 方向：支持水平和垂直方向。
  • 倒置垂直滑块：改变垂直滑块的最小值和最大值位置。

范围滑块（Range Slider）功能

除了上述所有功能外，还支持：

  • 拖动模式：控制拇指拖动的不同选项。
  • 间隔选择：通过点击或轻按选择特定间隔。

范围选择器（Range Selector）功能

除了上述所有功能外（不包括方向和倒置滑块），还支持：

  • 子项支持：添加任何类型的子项，包括图表。
  • 延迟更新：在拇指连续拖动时控制依赖组件的更新时间。

示例代码

安装

首先，在pubspec.yaml文件中添加以下依赖：

dependencies:
  syncfusion_flutter_sliders: ^最新版本号

然后运行 flutter pub get 来安装包。

使用示例

单个滑块（Slider）

水平滑块
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal Slider'),
        ),
        body: SliderWidget(),
      ),
    );
  }
}

class SliderWidget extends StatefulWidget {
  @override
  _SliderWidgetState createState() => _SliderWidgetState();
}

class _SliderWidgetState extends State<SliderWidget> {
  double _value = 40.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SfSlider(
        min: 0.0,
        max: 100.0,
        value: _value,
        interval: 20,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        minorTicksPerInterval: 1,
        onChanged: (dynamic value) {
          setState(() {
            _value = value;
          });
        },
      ),
    );
  }
}
垂直滑块
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Vertical Slider'),
        ),
        body: VerticalSliderWidget(),
      ),
    );
  }
}

class VerticalSliderWidget extends StatefulWidget {
  @override
  _VerticalSliderWidgetState createState() => _VerticalSliderWidgetState();
}

class _VerticalSliderWidgetState extends State<VerticalSliderWidget> {
  double _value = 40.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SfSlider.vertical(
        min: 0.0,
        max: 100.0,
        value: _value,
        interval: 20,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        minorTicksPerInterval: 1,
        onChanged: (dynamic value) {
          setState(() {
            _value = value;
          });
        },
      ),
    );
  }
}

范围滑块（Range Slider）

水平范围滑块
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal Range Slider'),
        ),
        body: RangeSliderWidget(),
      ),
    );
  }
}

class RangeSliderWidget extends StatefulWidget {
  @override
  _RangeSliderWidgetState createState() => _RangeSliderWidgetState();
}

class _RangeSliderWidgetState extends State<RangeSliderWidget> {
  SfRangeValues _values = SfRangeValues(40.0, 80.0);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SfRangeSlider(
        min: 0.0,
        max: 100.0,
        values: _values,
        interval: 20,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        minorTicksPerInterval: 1,
        onChanged: (SfRangeValues values) {
          setState(() {
            _values = values;
          });
        },
      ),
    );
  }
}
垂直范围滑块
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Vertical Range Slider'),
        ),
        body: VerticalRangeSliderWidget(),
      ),
    );
  }
}

class VerticalRangeSliderWidget extends StatefulWidget {
  @override
  _VerticalRangeSliderWidgetState createState() => _VerticalRangeSliderWidgetState();
}

class _VerticalRangeSliderWidgetState extends State<VerticalRangeSliderWidget> {
  SfRangeValues _values = SfRangeValues(40.0, 80.0);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SfRangeSlider.vertical(
        min: 0.0,
        max: 100.0,
        values: _values,
        interval: 20,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        minorTicksPerInterval: 1,
        onChanged: (SfRangeValues values) {
          setState(() {
            _values = values;
          });
        },
      ),
    );
  }
}

范围选择器（Range Selector）

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart' hide LabelPlacement;
import 'package:syncfusion_flutter_sliders/sliders.dart';

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

class RangeSelectorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Range Selector Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Data> _chartData = [
    Data(x: DateTime(2003), y: 3.4),
    Data(x: DateTime(2004), y: 2.8),
    Data(x: DateTime(2005), y: 1.6),
    Data(x: DateTime(2006), y: 2.3),
    Data(x: DateTime(2007), y: 2.5),
    Data(x: DateTime(2008), y: 2.9),
    Data(x: DateTime(2009), y: 3.8),
    Data(x: DateTime(2010), y: 2.0),
  ];

  final DateTime _dateMin = DateTime(2003);
  final DateTime _dateMax = DateTime(2010);
  final SfRangeValues _dateValues = SfRangeValues(DateTime(2005), DateTime(2008));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Syncfusion Flutter Range Selector'),
      ),
      body: Container(
        margin: EdgeInsets.zero,
        padding: EdgeInsets.zero,
        child: Stack(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 10),
              child: Center(
                child: SfRangeSelector(
                  min: _dateMin,
                  max: _dateMax,
                  initialValues: _dateValues,
                  labelPlacement: LabelPlacement.betweenTicks,
                  interval: 1,
                  dateIntervalType: DateIntervalType.years,
                  dateFormat: DateFormat.y(),
                  showTicks: true,
                  showLabels: true,
                  child: SizedBox(
                    height: 200,
                    child: SfCartesianChart(
                      margin: EdgeInsets.zero,
                      primaryXAxis: DateTimeAxis(
                        minimum: _dateMin,
                        maximum: _dateMax,
                        isVisible: false,
                      ),
                      primaryYAxis: const NumericAxis(
                        isVisible: false,
                        maximum: 4,
                      ),
                      series: <SplineAreaSeries<Data, DateTime>>[
                        SplineAreaSeries<Data, DateTime>(
                          dataSource: _chartData,
                          xValueMapper: (Data sales, int index) => sales.x,
                          yValueMapper: (Data sales, int index) => sales.y,
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Data {
  Data({required this.x, required this.y});

  final DateTime x;
  final double y;
}

以上是关于如何在Flutter项目中使用syncfusion_flutter_sliders插件的基本指南和完整示例代码。希望对您有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter应用中使用syncfusion_flutter_sliders插件来创建一个滑动条（Slider）组件的示例代码。这个插件提供了丰富的滑动条组件，包括范围滑动条（Range Slider）、圆形滑动条（Circular Slider）等。

首先，你需要在pubspec.yaml文件中添加依赖项：

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

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

以下是一个简单的示例，展示了如何使用syncfusion_flutter_sliders中的SfRangeSlider（范围滑动条）组件：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sf_range_slider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Syncfusion Flutter Sliders Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double? lowerValue = 10.0;
  double? upperValue = 50.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Syncfusion Range Slider Demo'),
      ),
      body: Center(
        child: SfRangeSlider(
          min: 0.0,
          max: 100.0,
          lowerValue: lowerValue,
          upperValue: upperValue,
          showTicks: true,
          showLabels: true,
          interval: 10,
          onValuesChanged: (SfRangeSliderValues values) {
            setState(() {
              lowerValue = values.lowerValue;
              upperValue = values.upperValue;
            });
          },
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text('Lower: ${lowerValue?.toInt()}'),
            Text('Upper: ${upperValue?.toInt()}'),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们导入了syncfusion_flutter_sliders中的sf_range_slider.dart。
  2. 创建了一个SfRangeSlider，设置了最小值和最大值（0到100），初始的下值和上值（10到50），并启用了刻度线和标签显示。
  3. 使用onValuesChanged回调来更新滑动条的值，并在UI中显示这些值。

这是一个基础的示例，syncfusion_flutter_sliders还提供了很多自定义选项和样式，你可以根据需要进一步配置和扩展。例如，你可以自定义滑动条的颜色、轨道样式、刻度样式等。详细的信息可以参考Syncfusion Flutter Sliders 官方文档。

回到顶部