Flutter单手操作进度控制插件one_hand_progress_controller的使用

Flutter单手操作进度控制插件one_hand_progress_controller的使用

Progress controller widget 是一种以四分之一圆设计用于单手使用的进度控制器。它支持左右手操作。目前，该组件主要处于演示版本，功能不是非常可定制化，后续会进行更新。如果您有任何功能请求，可以打开一个issue。

特性

允许用户仅通过拇指来控制视频、音乐等的进度。以下是一个工作示例：

示例动图

按钮和点击事件是可以自定义的。它可以与任何支持拖动进度、暂停、播放或其他功能的视频播放器配合使用，并且理论上也可以与其他能够通过用户控制进度值的东西一起使用。

使用方法

将该组件放入 Stack 组件中，示例如下：

Stack(
  children: [
    OneHandProgressController(
      size: 250,       // 控制器的大小
      width: 50,       // 控制器的宽度
      progress: progress,   // 当前进度值
      onProgessChange: ((p) { // 进度改变时的回调函数
        setState(() {
          progress = p;  // 更新当前进度值
        });
      }),
      actionButtons: [  // 操作按钮列表
        ActionButton(
          radius: 150,    // 按钮的半径
          onTap: () {},   // 按钮点击事件
          icon: const Icon(
            Icons.play_arrow,  // 图标
            color: Colors.white,
            size: 30,
          )
        )
      ],
    ),
  ],
)

示例图片

完整的示例代码可以在 example 文件夹中找到。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 OneHandProgressController 插件。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('单手操作进度控制插件示例'),
        ),
        body: ProgressControlDemo(),
      ),
    );
  }
}

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

class _ProgressControlDemoState extends State<ProgressControlDemo> {
  double progress = 0.0;

  void handleProgressChange(double newProgress) {
    setState(() {
      progress = newProgress;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        children: [
          OneHandProgressController(
            size: 250,
            width: 50,
            progress: progress,
            onProgessChange: handleProgressChange,
            actionButtons: [
              ActionButton(
                radius: 150,
                onTap: () {
                  print("按钮点击事件");
                },
                icon: const Icon(
                  Icons.play_arrow,
                  color: Colors.white,
                  size: 30,
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

更多关于Flutter单手操作进度控制插件one_hand_progress_controller的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter单手操作进度控制插件one_hand_progress_controller的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用Flutter中的one_hand_progress_controller插件的代码示例。这个插件旨在改善单手操作UI时的用户体验，通过提供一个进度控制器来实现。

首先，确保你已经在pubspec.yaml文件中添加了one_hand_progress_controller依赖：

dependencies:
  flutter:
    sdk: flutter
  one_hand_progress_controller: ^最新版本号  # 请替换为实际的最新版本号

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

以下是一个简单的示例，展示了如何使用one_hand_progress_controller插件：

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

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

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

class OneHandProgressControllerDemo extends StatefulWidget {
  @override
  _OneHandProgressControllerDemoState createState() => _OneHandProgressControllerDemoState();
}

class _OneHandProgressControllerDemoState extends State<OneHandProgressControllerDemo> {
  final OneHandProgressController _controller = OneHandProgressController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('One Hand Progress Controller Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Progress: ${_controller.value.toInt()}%',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            SliderTheme(
              data: SliderThemeData(
                thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
                overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
              ),
              child: Slider(
                value: _controller.value,
                min: 0,
                max: 100,
                onChanged: (double value) {
                  setState(() {
                    _controller.value = value;
                  });
                },
                onChangeEnd: (double value) {
                  // 当滑动结束时，可以执行一些操作，例如保存进度
                  print('Final progress: $value');
                },
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 触发进度条动画
                _controller.animateTo(
                  50, // 目标值
                  duration: Duration(seconds: 2), // 动画时长
                  curve: Curves.easeInOut, // 动画曲线
                );
              },
              child: Text('Animate to 50%'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个Slider组件，用于显示和修改进度。OneHandProgressController被用来管理这个进度条的状态，包括获取当前进度和触发动画。

  • OneHandProgressController _controller = OneHandProgressController();：创建一个进度控制器实例。
  • Slider组件的value属性绑定到_controller.value，onChanged回调更新_controller.value。
  • animateTo方法用于触发进度条的动画。

请注意，one_hand_progress_controller插件本身可能提供了一些额外的功能，用于优化单手操作体验。但是，基于插件的文档和当前提供的API，上述代码示例展示了如何基本集成和使用该插件来控制进度。如果有特定的单手操作优化功能，请查阅插件的官方文档以获取更多信息和示例。

回到顶部