Flutter 自定义按钮插件 flutter_joybuttons 的使用

Flutter JoyButtons

虚拟的 JoyButtons 适用于 Flutter 触摸屏应用。灵感来源于为智能手机编程 Gravitar 时，需要同时按下护盾和子弹的需求。

• JoyButtons
• UseCases
• Customization

运行示例应用，请访问 这里。

JoyButtons

虚拟 JoyButtons 是一种可以同时按下多个游戏按钮的方式。物理游戏控制器可以通过不同的手指同时按压。而触摸屏设备受限于前面的触摸屏，这使得同时按下按钮成为一个真正的挑战。

JoyButtons 可以解决这个问题。用户可以用一个拇指在两个维度上移动来激活多个按钮，但不能在所有可能的组合下同时按下大量按钮。 中心区域外有多数按钮。像一个虚拟操纵杆一样，用户可以在两个维度上移动拇指。 如果拇指按在中心区域，会报告 centerButtonOutput。中心按钮的按下方式可以由程序员自定义。 如果拇指按在外围区域，则会报告一个或两个相邻按钮的按下情况。这也可自定义。 当拇指不按压时，会报告一个空列表的按钮。

UseCases

• 用单个拇指或手指同时激活一个按钮、两个按钮或所有按钮。
• 用单个拇指按压并拖动，回调当前按下的按钮。
• 受到 Gravitar 启发，需要同时按下护盾和发射器而不抬起拇指。

感谢 flutter_joystick 提供的用法和代码灵感。 Gravitar 在移动端使用了 flutter_joystick。

Customization

flutter_joybuttons 默认使用 4 个 JoyButtons 按钮，或者你可以传递一个包含一个或多个 JoyButtonsButton 的列表。示例允许你更改使用的数量。可以定义大量的按钮。请注意，按钮越多，每个按钮之间的角度差异就越小。2 到 5 个按钮似乎比较合理。

示例展示了设置 3 个按钮的情况。当按压中心区域时，会报告所有 3 个按钮。外围按钮可以单独激活，也可以与相邻按钮一起激活。在示例中，按压外围区域并旋转 360 度会同时激活 1 或 2 个按钮，而移动到中心按钮则会激活所有按钮。你可以定义按压中心时报告哪些按钮 - 任何 List。

在相邻按钮之间，报告多个按钮激活的区域可以通过 simultaneousOverlapScale 自定义。值为 0.0 表示没有重叠区域，因此只激活单个按钮，而按压外围区域时，值为 1.0 表示重叠区域为 100%，所以按压外围区域时总是有多个激活。默认值约为 0.4。

API

• buttonWidgets: 按钮列表
• simultaneousOverlapScale: 从 0.0（单独）到 1.0（始终与相邻），或者单独与相邻（默认约为 0.4）
• centerButton: 中心按钮的 Widget
• centerButtonOutput: 按钮列表

示例代码

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

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

class JoyButtonsExampleApp extends StatelessWidget {
  const JoyButtonsExampleApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('JoyButtons Example'),
        ),
        body: const JoyButtonsExample(),
      ),
    );
  }
}

class JoyButtonsExample extends StatefulWidget {
  const JoyButtonsExample({Key? key}) : super(key: key);

  [@override](/user/override)
  _JoyButtonsExampleState createState() => _JoyButtonsExampleState();
}

class _JoyButtonsExampleState extends State<JoyButtonsExample> {
  List<int> _pressed = [];
  double dimension = 45;

  double _sizeOfCenter = 0.4;
  double _numberOfButtons = 3;
  final double _maxButtons = 50;

  final _names = List.generate(26, (index) => String.fromCharCode(index + 65));
  final _colors = [
    Colors.amber,
    Colors.blue,
    Colors.pink,
    Colors.green,
    Colors.red,
    Colors.lime,
  ];

  List<Widget> getButtons() {
    return List.generate(_numberOfButtons.round(), (index) {
      var name = _names[index % _names.length];
      var color = _colors[index % _colors.length];
      return testButton(name, color);
    });
  }

  JoyButtonsButton testButton(String label, MaterialColor color) {
    return JoyButtonsButton(
      widgetColor: color,
      title: Padding(
        padding: const EdgeInsets.only(top: 16.0),
        child: Text(label, style: const TextStyle(color: Colors.white, fontSize: 32)),
      ),
    );
  }

  List<Widget> getIndicators(int number) {
    return List.generate(_numberOfButtons.round(), (index) {
      var name = _names[index % _names.length];
      var color = _colors[index % _colors.length];
      return testIndicator(name, index, color);
    });
  }

  Container testIndicator(String label, int index, Color color) {
    return Container(
      alignment: Alignment.center,
      width: dimension,
      height: dimension,
      color: _pressed.contains(index) ? color : Colors.grey.shade200,
      child: Text(label, style: const TextStyle(color: Colors.white, fontSize: 32)),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              children: [
                const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text("Number of Buttons", style: TextStyle(fontSize: 24)),
                ),
                Slider(
                  min: 1.0,
                  max: _maxButtons,
                  value: _numberOfButtons,
                  divisions: (_maxButtons - 1.0).round(),
                  label: '${_numberOfButtons.round()}',
                  onChanged: (value) {
                    setState(() {
                      _numberOfButtons = value;
                    });
                  },
                ),
              ],
            ),
            Column(
              children: [
                const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text("Size of center", style: TextStyle(fontSize: 24)),
                ),
                Slider(
                  min: 0.0,
                  max: 1.0,
                  value: _sizeOfCenter,
                  divisions: 20,
                  label: _sizeOfCenter.toString(),
                  onChanged: (value) {
                    setState(() {
                      _sizeOfCenter = value;
                    });
                  },
                ),
              ],
            ),
            Column(
              children: [
                const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text("Pressed buttons", style: TextStyle(fontSize: 24)),
                ),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Wrap(
                    alignment: WrapAlignment.spaceAround,
                    children: [
                      ...getIndicators(_numberOfButtons.round()),
                    ],
                  ),
                ),
              ],
            ),
            Column(
              children: [
                const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text("Touch joybuttons widget to see which buttons are reported as pressed",
                      style: TextStyle(fontSize: 24)),
                ),
                JoyButtons(
                  centerButtonOutput: List.generate(_numberOfButtons.round(), (index) => index),
                  centerWidget: JoyButtonsCenter(size: Size(200 * _sizeOfCenter, 200 * _sizeOfCenter),),
                  buttonWidgets: getButtons(),
                  listener: (details) {
                    setState(() {
                      _pressed = details.pressed;
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}