Flutter快捷操作插件flutter_shortcut_plus的使用

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

Flutter快捷操作插件flutter_shortcut_plus的使用

flutter_shortcut_plus 是一个用于在Flutter应用中创建静态和动态快捷方式的插件,支持iOS和Android平台。通过该插件,用户可以在手机主屏幕上为应用创建快捷方式,方便快速启动特定功能或页面。

快速开始

1. 将插件添加到项目中

pubspec.yaml 文件中添加 flutter_shortcut_plus 依赖:

dependencies:
  flutter_shortcut_plus: ^<latest version>

运行 flutter pub get 来获取并安装依赖包。

2. 初始化 Flutter Shortcuts(可选)

如果你需要在应用启动时初始化快捷方式功能,可以在 main.dart 中调用 FlutterShortcut.initialize() 方法。此步骤对于Android平台是必需的。

import 'package:flutter_shortcut_plus/flutter_shortcut.dart';

void main() {
  // 初始化快捷方式插件
  FlutterShortcut.initialize(debug: true);
  runApp(const MyApp());
}

示例代码

以下是一个完整的示例代码,展示了如何使用 flutter_shortcut_plus 插件来创建、更新和清除快捷方式。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_shortcut_plus/flutter_shortcut.dart';

void main() {
  // 初始化快捷方式插件
  FlutterShortcut.initialize(debug: true);
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _action;

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 初始化平台状态
  Future<void> initPlatformState() async {
    // 监听快捷方式触发的动作
    FlutterShortcut.listenAction((String action) {
      setState(() {
        _action = action;
      });
    });

    // 设置初始快捷方式
    setShortcutItems();

    if (!mounted) return;
  }

  // 设置快捷方式
  void setShortcutItems() {
    FlutterShortcut.setShortcutItems(
      shortcutItems: <ShortcutItem>[
        const ShortcutItem(
          id: "1",
          action: 'shortcut.scan',
          shortLabel: '扫描二维码',
          icon: "assets/scan.png", // 使用Flutter资源作为图标
          shortcutIconAsset: ShortcutIconAsset.flutterAsset,
        ),
        const ShortcutItem(
          id: "2",
          action: 'shortcut.messages',
          shortLabel: '消息',
          icon: "message", // 使用原生资源作为图标
          shortcutIconAsset: ShortcutIconAsset.nativeAsset,
        ),
      ],
    );
  }

  // 清除所有快捷方式
  void clearShortcutItems() {
    FlutterShortcut.clearShortcutItems();
  }

  // 添加或更新快捷方式
  void pushShortcutItem() {
    FlutterShortcut.pushShortcutItem(
      shortcut: const ShortcutItem(
        id: '2',
        action: 'shortcut.messages',
        shortLabel: '消息',
        icon: 'message',
        shortcutIconAsset: ShortcutIconAsset.nativeAsset,
      ),
    );
  }

  // 更新现有快捷方式
  void updateShortcutItem() {
    FlutterShortcut.updateShortcutItem(
      shortcut: const ShortcutItem(
        id: '1',
        action: 'shortcut.scan',
        shortLabel: '更新后的扫描二维码',
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Shortcut Plus 示例'),
        ),
        body: ListView(
          padding: const EdgeInsets.all(20),
          children: [
            Text('监听到的快捷方式动作: ${_action ?? '无'}'),
            ...[
              ListItem("设置快捷方式", setShortcutItems),
              ListItem("清除快捷方式", clearShortcutItems),
              ListItem("添加/更新快捷方式", pushShortcutItem),
              ListItem("更新快捷方式", updateShortcutItem),
            ].map((item) {
              return FilledButton(
                onPressed: item.onPressed,
                child: Text(item.title),
              );
            }).toList()
          ],
        ),
      ),
    );
  }
}

// 定义按钮项
class ListItem {
  final String title;
  final VoidCallback onPressed;
  ListItem(this.title, this.onPressed);
}

更多关于Flutter快捷操作插件flutter_shortcut_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter快捷操作插件flutter_shortcut_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 flutter_shortcut_plus 插件的示例代码。这个插件允许你在 Flutter 应用中注册和管理快捷操作(如长按应用图标显示的快捷菜单)。

首先,确保你已经在 pubspec.yaml 文件中添加了 flutter_shortcut_plus 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_shortcut_plus: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来,你需要进行以下步骤来设置快捷操作:

1. 配置 AndroidManifest.xml

在 Android 项目中,你需要配置 AndroidManifest.xml 来声明快捷操作。例如:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapp">

    <application
        ...>
        
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            ...>
            
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            
            <!-- 快捷操作配置 -->
            <meta-data
                android:name="flutter_shortcut"
                android:resource="@xml/shortcuts" />
        </activity>
    </application>
</manifest>

然后,在 res/xml 目录下创建一个 shortcuts.xml 文件来定义快捷操作:

<?xml version="1.0" encoding="utf-8"?>
<shortcuts xmlns:android="http://schemas.android.com/apk/res/android">
    <shortcut
        android:shortcutId="action_search"
        android:enabled="true"
        android:icon="@drawable/ic_search"
        android:shortcutShortLabel="@string/shortcut_search_short_label"
        android:shortcutLongLabel="@string/shortcut_search_long_label">
        <intent
            android:action="android.intent.action.VIEW"
            android:targetPackage="com.example.myapp"
            android:targetClass="com.example.myapp.MainActivity"
            android:data="search://query" />
    </shortcut>
</shortcuts>

别忘了在 res/values/strings.xml 中添加对应的字符串资源:

<resources>
    <string name="shortcut_search_short_label">Search</string>
    <string name="shortcut_search_long_label">Search something</string>
</resources>

2. 配置 iOS

对于 iOS,快捷操作主要通过 Info.plist 和 Swift/Objective-C 代码配置,但 flutter_shortcut_plus 插件目前可能不支持 iOS 的动态快捷操作配置。因此,这里主要关注 Android 的实现。

3. Flutter 代码

在 Flutter 代码中,你可以使用 flutter_shortcut_plus 插件来注册快捷操作回调。首先,确保你已经导入了插件:

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

然后,你可以在 MaterialApp 中注册快捷操作回调:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      onGenerateRoute: (RouteSettings settings) {
        if (settings.name == '/search') {
          return MaterialPageRoute(
            builder: (context) => SearchPage(),
          );
        }
        return null;
      },
      builder: (context, child) {
        return ShortcutManager(
          child: child!,
          shortcuts: {
            LogicalKeySet(LogicalKeyboardKey.search): CallbackAction(() {
              Navigator.pushNamed(context, '/search');
            }),
          },
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Press and hold the app icon on Android to see shortcuts.'),
      ),
    );
  }
}

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Page'),
      ),
      body: Center(
        child: Text('This is the search page.'),
      ),
    );
  }
}

在上面的代码中,我们创建了一个简单的 Flutter 应用,其中包含一个主页和一个搜索页。我们使用 ShortcutManager 来监听快捷操作,当用户触发搜索快捷操作时(例如,长按应用图标并选择搜索),我们会导航到搜索页面。

请注意,快捷操作的具体实现和可用性可能因设备和操作系统版本而异。确保在目标设备上测试你的应用以验证快捷操作是否按预期工作。

回到顶部