Flutter幸运转盘插件flutter_fortune_wheel的使用

flutter_fortune_wheel 是一个用于Flutter的幸运转盘插件，可以用来实现轮盘抽奖功能。它支持高度自定义，并且可以在移动、桌面和Web平台上运行。

快速开始

首先通过 pub.dev 安装该插件，然后导入并使用 FortuneWheel 组件：

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_fortune_wheel: ^latest_version

示例代码

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

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final StreamController<int> controller = StreamController<int>();

  @override
  void dispose() {
    controller.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final items = [
      'Han Solo',
      'Yoda',
      'Obi-Wan Kenobi',
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Fortune Wheel'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: FortuneWheel(
                selected: controller.stream,
                items: [
                  for (var it in items) FortuneItem(child: Text(it)),
                ],
              ),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  controller.add(Fortune.randomInt(0, items.length));
                });
              },
              child: Text('Spin'),
            ),
          ],
        ),
      ),
    );
  }
}

自定义

拖动行为

默认情况下，幸运转盘组件会响应触摸和拖动输入。可以通过 physics 属性自定义这种行为，该属性需要一个 PanPhysics 类的实现。如果你想禁用拖动，只需传递一个 NoPanPhysics 实例即可。

对于 FortuneWheel，推荐使用 CircularPanPhysics，而 FortuneBar 默认使用 DirectionalPanPhysics.horizontal。如果现有的实现不满足需求，你可以创建一个 PanPhysics 的子类。

例如，改变返回动画的时间和曲线：

StreamController<int> controller = StreamController<int>();
FortuneWheel(
  physics: CircularPanPhysics(
    duration: Duration(seconds: 1),
    curve: Curves.decelerate,
  ),
  onFling: () {
    controller.add(1);
  },
  selected: controller.stream,
  items: [
    FortuneItem(child: Text('Han Solo')),
    FortuneItem(child: Text('Yoda')),
    FortuneItem(child: Text('Obi-Wan Kenobi')),
  ],
)

项目样式

FortuneItem 可以通过其 style 属性进行单独样式设置。要根据共同逻辑对 FortuneWidget 的所有项目进行样式设置，可以通过 StyleStrategy 进行。默认情况下，FortuneWheel 使用 AlternatingStyleStrategy，而 FortuneBar 使用 UniformStyleStrategy。

例如，单独设置每个项目的样式：

FortuneWheel(
  selected: Stream.value(0),
  items: [
    FortuneItem(
      child: Text('A'),
      style: FortuneItemStyle(
        color: Colors.red,
        borderColor: Colors.green,
        borderWidth: 3,
      ),
    ),
    FortuneItem(child: Text('B')),
  ],
)

指示器样式

位置指示器可以通过向 FortuneWidget.indicators 传递一组 FortuneIndicator 来自定义。默认情况下，FortuneWheel 使用 TriangleIndicator，而 FortuneBar 使用 RectangleIndicator。你可以传递这些现有小部件的样式版本或创建自己的实现。

例如，使用自定义指示器：

FortuneWheel(
  selected: Stream.value(0),
  indicators: <FortuneIndicator>[
    FortuneIndicator(
      alignment: Alignment.bottomCenter,
      child: TriangleIndicator(
        color: Colors.green,
        width: 20.0,
        height: 20.0,
        elevation: 0,
      ),
    ),
  ],
  items: [
    FortuneItem(child: Text('A')),
    FortuneItem(child: Text('B')),
  ],
)

希望这个指南对你有所帮助！如果你有任何问题或建议，请随时提出。