Flutter旋转轮盘项目技术文档

Flutter旋转轮盘项目技术文档

flutter-spinning-wheel A very customizable spinning wheel widget for Flutter. 项目地址: https://gitcode.com/gh_mirrors/fl/flutter-spinning-wheel

安装指南

1. 添加依赖

首先，在项目的pubspec.yaml文件中添加flutter_spinning_wheel依赖：

dependencies:
  flutter_spinning_wheel: ^latest_version

2. 安装依赖

在项目根目录下运行以下命令，安装依赖包：

flutter packages get

项目使用说明

1. 创建项目

使用以下命令创建一个新的Flutter项目：

flutter create myapp

2. 编辑主文件

编辑lib/main.dart文件，添加flutter_spinning_wheel组件：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueGrey,
        body: Center(
          child: Container(child:
            SpinningWheel(
              Image.asset('assets/images/wheel-6-300.png'),
              width: 310,
              height: 310,
              dividers: 6,
              onEnd: _dividerController.add,
            ),
          ),
        ));
  }
}

3. 替换图片

你可以将默认的图片替换为你自己的图片资源。

项目API使用文档

构造函数参数

| 参数名 | 默认值 | 描述 | | :----------------------- | :----------- | :--------------------------------------------------------------------------------------------- | | image | | 用于轮盘的图片。 | | dividers | | 图片中的分割数量。所有分割必须相等。 | | height | | 显示轮盘的容器高度。 | | width | | 显示轮盘的容器宽度。 | | initialSpinAngle | 0.0 | 轮盘的初始旋转角度，使轮盘可以初始旋转。 | | spinResistance | 0.5 | 从0.0到1.0，用于计算轮盘的速度和减速。 | | canInteractWhileSpinning | true | 如果设置为false，一旦动画开始，用户将无法停止它。 | | secondaryImage | | 将渲染在轮盘上方的次要图片，不受动画影响。 | | secondaryImageHeight | | 次要图片的高度。 | | secondaryImageWidth | | 次要图片的宽度。 | | secondaryImageTop | | 用于微调次要图片的位置，否则它将居中。 | | secondaryImageLeft | | 用于微调次要图片的位置，否则它将居中。 | | onUpdate | void onUpdate(int value) | 当选择的分割在动画期间发生变化时执行的回调函数。 | | onEnd | void onEnd(int value) | 当动画停止时执行的回调函数。 | | shouldStartOrStop | | Stream 用于与轮盘交互，double为y轴上的每秒像素数（默认8000）。 |

项目安装方式

1. 通过pubspec.yaml安装

在pubspec.yaml文件中添加依赖，并运行flutter packages get命令。

2. 通过命令行创建项目

使用flutter create命令创建一个新的Flutter项目。

3. 编辑主文件

编辑lib/main.dart文件，添加flutter_spinning_wheel组件，并根据需要替换图片资源。

flutter-spinning-wheel A very customizable spinning wheel widget for Flutter. 项目地址: https://gitcode.com/gh_mirrors/fl/flutter-spinning-wheel