Flutter旋转拨号控件插件wtf_rotary_dial的使用

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

Flutter旋转拨号控件插件wtf_rotary_dial的使用

一个允许通过旋转拨号来输入数字的小部件。

点击这里查看完整的示例。

灵感来源于这个项目。

安装

将插件添加到您的 pubspec.yaml 文件中：

dependencies:
  wtf_rotary_dial: ^0.1.0

从命令行安装包：

flutter pub get

如果您喜欢这个插件，请考虑在 GitHub 上给它一个星，并在 pub.dev 上点赞 ❤️。

使用

您可以按以下方式使用旋转拨号小部件：

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'WTF Rotary Dial',
    home: Scaffold(
      body: Center(
        child: RotaryDial(
          onDigitSelected: (value) {
            // The value is entered number.
          },
          rotaryDialThemeData: RotaryDialThemeData(
            spinnerColor: const Color(0xFFFFFFFF), // 旋转部分的颜色
            rotaryDialColor: const Color(0xFF1871F0), // 主圆圈的颜色
            dialColor: const Color(0xFF529AFF), // 数字所在圆圈的颜色
            numberColor: const Color(0xFFFFFFFF), // 数字的颜色
            margin: null, // 外部填充
            dialBorderRadius: null, // 数字所在圆圈的半径
          ),
          duration: const Duration(milliseconds: 500), // 动画持续时间
          curve: Curves.decelerate, // 动画曲线
        ),
      ),
    ),
  );
}

结果

主题定制

您可以根据喜好自定义该小部件。为此可以使用 RotaryDialThemeData 类。

参数 描述
rotaryDialColor 负责分配主圆圈的颜色。
spinnerColor 负责分配旋转部分的颜色。
dialColor 负责分配数字所在圆圈的颜色。
numberColor 负责分配数字的颜色。
margin 负责设置外部填充。
dialBorderRadius 负责分配数字所在圆圈的半径。

示例代码

以下是完整的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WTF Rotary Dial',
      home: Scaffold(
        body: Center(
          child: RotaryDial(
            onDigitSelected: (value) {
              // The value is entered number.
            },
            rotaryDialThemeData: RotaryDialThemeData(
              spinnerColor: const Color(0xFFFFFFFF), // 旋转部分的颜色
              rotaryDialColor: const Color(0xFF1871F0), // 主圆圈的颜色
              dialColor: const Color(0xFF529AFF), // 数字所在圆圈的颜色
              numberColor: const Color(0xFFFFFFFF), // 数字的颜色
              margin: null, // 外部填充
              dialBorderRadius: null, // 数字所在圆圈的半径
            ),
            duration: const Duration(milliseconds: 500), // 动画持续时间
            curve: Curves.decelerate, // 动画曲线
          ),
        ),
      ),
    );
  }
}

更多关于Flutter旋转拨号控件插件wtf_rotary_dial的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter旋转拨号控件插件wtf_rotary_dial的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用wtf_rotary_dial插件的一个示例代码案例。这个插件提供了一个旋转拨号控件，可以用于创建类似电话拨号盘的界面。

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

dependencies:
  flutter:
    sdk: flutter
  wtf_rotary_dial: ^最新版本号  # 请替换为当前最新版本号

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

接下来，你可以在你的Flutter应用中使用这个旋转拨号控件。下面是一个完整的示例代码，展示了如何使用wtf_rotary_dial控件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Rotary Dial Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RotaryDialPage(),
    );
  }
}

class RotaryDialPage extends StatefulWidget {
  @override
  _RotaryDialPageState createState() => _RotaryDialPageState();
}

class _RotaryDialPageState extends State<RotaryDialPage> {
  double _dialValue = 0.0;

  void _onDialChanged(double value) {
    setState(() {
      _dialValue = value;
    });
    print('Dial value changed to: $_dialValue');
  }

  void _onDialReleased(double value) {
    print('Dial released at: $value');
    // 在这里可以添加拨打电话或其他操作的逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rotary Dial Example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: RotaryDial(
            value: _dialValue,
            onChange: _onDialChanged,
            onRelease: _onDialReleased,
            dialColor: Colors.blue,
            dialBackgroundColor: Colors.grey[200]!,
            dialInactiveColor: Colors.grey,
            dialWidth: 20.0,
            dialInactiveWidth: 10.0,
            needleColor: Colors.red,
            needleWidth: 4.0,
            min: 0.0,
            max: 10.0,
            steps: 100, // 增加步骤数以获得更平滑的旋转效果
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 依赖导入：首先，在pubspec.yaml中添加wtf_rotary_dial依赖。
  2. 主应用入口：MyApp是一个无状态组件，它定义了应用的主题和主页。
  3. 主页：RotaryDialPage是一个有状态组件，它包含旋转拨号控件的逻辑。
  4. 状态管理：使用_dialValue变量来存储当前的拨号值，并在旋转拨号控件的值改变时更新这个变量。
  5. 回调方法：
    • _onDialChanged：当旋转拨号控件的值改变时调用，更新_dialValue并打印当前值。
    • _onDialReleased：当旋转拨号控件释放时调用，打印释放时的值，并可以在这里添加拨打电话或其他操作的逻辑。
  6. 旋转拨号控件：使用RotaryDial控件，并配置相关属性，如颜色、宽度、最小值、最大值和步骤数。

这个示例展示了如何使用wtf_rotary_dial插件创建一个简单的旋转拨号界面，并处理旋转和释放事件。你可以根据需要进一步自定义控件的样式和行为。

回到顶部