Flutter滑动输入插件input_slider的使用

插件简介

input_slider 是一个Flutter插件，它将 TextField 和 Slider 组合在一起，以提供更精确的数值输入方式。通过同步文本框和滑块，用户既能直观地调整数值，又能进行精准的数值输入。此外，还可以为每个滑块添加前置组件（如标签或图标）来增强界面的表现力。

基本用法

单个InputSlider的使用

InputSlider(
  onChange: (value) => print("change: $value"), // 滑动时触发的回调函数
  min: 0.0,                                     // 最小值
  max: 100.0,                                   // 最大值
  decimalPlaces: 0,                             // 小数位数
  value: 50.0,                                  // 初始值
  leading: Text("Percentage:"),                 // 前置组件，可以是文字或图标
)

InputSliderForm的使用

当需要组合多个 InputSlider 时，可以使用 InputSliderForm 来管理它们。这使得你可以统一设置样式、对齐方式等属性。

InputSliderForm(
    leadingWeight: 1,                           // 前置组件所占宽度比例
    sliderWeight: 20,                           // 滑块部分所占宽度比例
    activeSliderColor: Colors.red,              // 活动状态下的颜色
    inactiveSliderColor: Colors.green[100],     // 非活动状态下的颜色
    filled: true,                               // 是否填充背景色
    vertical: true,                             // 是否垂直布局，默认水平
    children: [
      InputSlider(
        onChange: (value) {
          print("Setting 1 changed");
        },
        min: 0.0,
        max: 10.0,
        decimalPlaces: 0,
        defaultValue: 5.0,
        leading: Text("Setting 1:"),
      ),
      InputSlider(
        onChange: (value) {
          print("Setting 2 changed");
        },
        min: 0.0,
        max: 1.0,
        decimalPlaces: 3,
        defaultValue: 0.32,
      ),
      InputSlider(
        onChange: (value) {
          print("Setting 3 changed");
        },
        min: 0.0,
        max: 5.0,
        decimalPlaces: 1,
        defaultValue: 4.1,
        leading: Icon(Icons.perm_data_setting_outlined),
      ),
    ],
)

完整示例代码

以下是一个完整的示例应用程序，展示了如何在Flutter项目中使用 input_slider 插件：

import 'package:flutter/material.dart';
import 'package:input_slider/input_slider.dart';
import 'package:input_slider/input_slider_form.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage() : super();

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

class _MyHomePageState extends State<MyHomePage> {
  double _volume = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          children: [
            InputSlider(
              onChange: (value) {
                setState(() {
                  _volume = value;
                });
              },
              min: 0.0,
              max: 100.0,
              decimalPlaces: 0,
              defaultValue: _volume,
              activeSliderColor: Colors.green,
              inactiveSliderColor: Colors.green[100],
              leading: Icon(Icons.volume_down),
            ),
            _volumeDisplay(),
            Padding(padding: EdgeInsets.symmetric(vertical: 24), child: Divider()),
            Expanded(
              child: InputSliderForm(
                vertical: true,
                leadingWeight: 1,
                sliderWeight: 20,
                activeSliderColor: Colors.red,
                inactiveSliderColor: Colors.green[100],
                filled: true,
                children: [
                  InputSlider(
                    onChange: (value) {
                      print("Setting 1 changed");
                    },
                    min: 0.0,
                    max: 10.0,
                    decimalPlaces: 0,
                    defaultValue: 5.0,
                    leading: Text("Setting 1:"),
                  ),
                  InputSlider(
                    onChange: (value) {
                      print("Setting 2 changed");
                    },
                    min: 0.0,
                    max: 1.0,
                    decimalPlaces: 3,
                    defaultValue: 0.32,
                  ),
                  InputSlider(
                    onChange: (value) {
                      print("Setting 3 changed");
                    },
                    min: 0.0,
                    max: 5.0,
                    decimalPlaces: 1,
                    defaultValue: 4.1,
                    leading: Icon(Icons.perm_data_setting_outlined),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _volumeDisplay() {
    if (_volume < 30) return Text("Turn it up!");
    if (_volume < 70) return Text("Nice volume :-)");
    return Text("Ahhhh! My ears!");
  }
}

此示例展示了如何创建一个包含单个 InputSlider 和一组 InputSliderForm 的页面，并且根据音量大小显示不同的提示信息。通过这种方式，你可以在自己的应用中轻松集成滑动输入功能，提高用户体验。