Flutter方向控制插件 arrow_pad 的使用

arrow_pad 是一个类似于MP3播放器按钮风格的箭头垫控件，但它有四个方向箭头。该插件可以用于任何平台，并且具有高度自定义性。

功能特性

• 跨平台支持：可以在所有平台上使用。
• 自定义样式：可以通过设置颜色、图标样式等进行自定义。
• 不同的图标样式：提供多种图标样式选择。
• 点击触发：可以选择在按下或抬起时触发事件。

示例演示

你可以通过访问 Arrow Pad Playground 查看不同功能和示例。

设置步骤

1. 添加依赖

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

dependencies:
  arrow_pad: ^0.2.0 # 使用最新版本

2. 导入包

在 Dart 文件中导入 arrow_pad 包：

import 'package:arrow_pad/arrow_pad.dart';

基本使用方法

默认用法

const ArrowPad(),

自定义用法

ArrowPad(
    height: 80.0,
    width: 80.0,
    innerColor: Colors.blue,
    arrowPadIconStyle: ArrowPadIconStyle.arrow,
    clickTrigger: ClickTrigger.onTapDown,
    onPressed: (direction) => print('Pressed $direction'),
),

完整示例代码

以下是一个完整的示例项目，展示了如何使用 arrow_pad 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Arrow Pad Example',
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.brown,
      ),
      home: const ArrowPadExample(),
    );
  }
}

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

  @override
  State<ArrowPadExample> createState() => _ArrowPadExampleState();
}

class _ArrowPadExampleState extends State<ArrowPadExample> {
  String _secondArrowPadValue = 'With Functions (tapDown)';
  String _thirdArrowPadValue = 'With Functions (tapUp)';

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Arrow Pad Example'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ArrowPad(),
                  Text('Default Arrow Pad'),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ArrowPad(
                    padding: const EdgeInsets.all(8.0),
                    height: height / 5,
                    width: width / 4,
                    iconColor: Colors.white,
                    innerColor: Colors.red,
                    outerColor: const Color(0xFFCC0000),
                    splashColor: const Color(0xFFCC0000),
                    hoverColor: const Color(0xFFFF4D4D),
                    onPressed: (direction) {
                      setState(() {
                        _secondArrowPadValue = switch (direction) {
                          PressDirection.up => 'Up Pressed (tapDown)',
                          PressDirection.right => 'Right Pressed (tapDown)',
                          PressDirection.down => 'Down Pressed (tapDown)',
                          PressDirection.left => 'Left Pressed (tapDown)',
                        };
                      });
                    },
                  ),
                  Text(_secondArrowPadValue),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ArrowPad(
                    padding: const EdgeInsets.all(8.0),
                    height: height / 5,
                    width: width / 4,
                    iconColor: Colors.white,
                    innerColor: Colors.red,
                    outerColor: const Color(0xFFCC0000),
                    splashColor: const Color(0xFFCC0000),
                    hoverColor: const Color(0xFFFF4D4D),
                    clickTrigger: ClickTrigger.onTapUp,
                    onPressed: (direction) {
                      setState(() {
                        _thirdArrowPadValue = switch (direction) {
                          PressDirection.up => 'Up Pressed (tapUp)',
                          PressDirection.right => 'Right Pressed (tapUp)',
                          PressDirection.down => 'Down Pressed (tapUp)',
                          PressDirection.left => 'Left Pressed (tapUp)',
                        };
                      });
                    },
                  ),
                  Text(_thirdArrowPadValue),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ArrowPad(
                    padding: const EdgeInsets.all(8.0),
                    height: height / 5,
                    width: width / 4,
                    arrowPadIconStyle: ArrowPadIconStyle.arrow,
                    hoverColor: Colors.green,
                    iconColor: const Color(0xFF631739),
                    outerColor: const Color(0xFF86FC8A),
                  ),
                  const Text('Without Functions'),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ArrowPad(
                    height: height / 7,
                    width: width / 6,
                    innerColor: Colors.blue,
                    arrowPadIconStyle: ArrowPadIconStyle.arrow,
                  ),
                  const Text('Small Size'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

版本迁移

从 0.1.5 升级到 0.2.0 需要注意以下变化：

• onPressedUp, onPressedRight, onPressedDown 和 onPressedLeft 已被弃用，改为使用 onPressed 方法。

// Before
ArrowPad(
    onPressedUp: () => print('up'),
    onPressedLeft: () => print('left'),
    onPressedRight: () => print('right'),
    onPressedDown: () => print('down'),
),

// After
ArrowPad(
    onPressed: (direction) => print(direction),
),