Flutter快速操作插件quick_actions的使用

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

Flutter快速操作插件quick_actions的使用

quick_actions简介

quick_actions 是一个Flutter插件,它允许你管理和与应用程序的主屏幕快速操作进行交互。快速操作指的是iOS上的同名概念和Android上的App Shortcuts API

平台 支持版本
Android SDK 16+*
iOS 9.0+

注意:该插件在Android上最低支持SDK 16,但在低于SDK 25(Android 7.1)的版本中将不会有任何操作。

使用方法

初始化库

在应用程序生命周期的早期初始化库,提供一个回调函数,当用户通过快速操作启动应用时将调用此回调函数。

final QuickActions quickActions = const QuickActions();
quickActions.initialize((String shortcutType) {
  if (shortcutType == 'action_main') {
    print('The user tapped on the "Main view" action.');
  }
  // 更多处理代码...
});

管理应用的快速操作

你可以通过setShortcutItems方法来设置应用的快速操作项:

quickActions.setShortcutItems(<ShortcutItem>[
  const ShortcutItem(type: 'action_main', localizedTitle: 'Main view', icon: 'icon_main'),
  const ShortcutItem(type: 'action_help', localizedTitle: 'Help', localizedSubtitle: 'Tap to get help', icon: 'icon_help')
]);

注意

  • type参数应该在你的应用程序中是唯一的。
  • 可选的icon应该是原生资源(iOS上的xcassets或Android上的drawable)的名称,应用将为此快速操作显示。

完整示例Demo

以下是一个完整的示例,展示了如何在Flutter项目中使用quick_actions插件:

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Quick Actions Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String shortcut = 'no action set';

  @override
  void initState() {
    super.initState();

    const QuickActions quickActions = QuickActions();
    quickActions.initialize((String shortcutType) {
      setState(() {
        shortcut = shortcutType;
      });
    });

    quickActions.setShortcutItems(<ShortcutItem>[
      // 注意:第一个操作图标仅在iOS上有效。
      // 在实际项目中,请确保两个平台使用相同的文件名。
      const ShortcutItem(
        type: 'action_one',
        localizedTitle: 'Action one',
        localizedSubtitle: 'Action one subtitle',
        icon: 'AppIcon',
      ),
      // 注意:第二个操作图标仅在Android上有效。
      // 在实际项目中,请确保两个平台使用相同的文件名。
      const ShortcutItem(
        type: 'action_two',
        localizedTitle: 'Action two',
        icon: 'ic_launcher',
      ),
    ]).then((void _) {
      setState(() {
        if (shortcut == 'no action set') {
          shortcut = 'actions ready';
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(shortcut),
      ),
      body: const Center(
        child: Text('在主屏幕上长按应用图标,'
            '选择 Action one 或 Action two 选项。点击该操作应设置工具栏标题。'),
      ),
    );
  }
}

Android注意事项

如果使用的图标资源(drawables)仅在Dart代码中引用,你可能需要显式标记它们以保持,以确保它们在发布构建中可用。

有关在Android上使用此包的更多信息,请参阅quick_actions_android README

以上就是quick_actions插件的使用指南,希望对你有所帮助!如果你有任何问题或需要进一步的帮助,请随时提问。


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

1 回复

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


当然,下面是一个关于如何在Flutter中使用quick_actions插件的示例代码。这个插件允许你处理iOS和Android上的快速操作(也称为快捷方式或3D Touch快捷方式)。

首先,你需要在你的pubspec.yaml文件中添加quick_actions依赖:

dependencies:
  flutter:
    sdk: flutter
  quick_actions: ^0.7.0  # 请检查最新版本号并替换

然后,运行flutter pub get来安装依赖。

接下来,你需要进行一些平台特定的设置:

iOS设置

在你的ios/Runner/Info.plist文件中,添加以下代码来定义快捷操作:

<key>UIApplicationShortcutItems</key>
<array>
    <dict>
        <key>UIApplicationShortcutItemIconType</key>
        <string>UIApplicationShortcutIconTypeCompose</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>Compose</string>
        <key>UIApplicationShortcutItemSubtitle</key>
        <string>Start a new message</string>
        <key>UIApplicationShortcutItemType</key>
        <string>$(PRODUCT_BUNDLE_IDENTIFIER).compose</string>
    </dict>
    <dict>
        <key>UIApplicationShortcutItemIconType</key>
        <string>UIApplicationShortcutIconTypeSearch</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>Search</string>
        <key>UIApplicationShortcutItemType</key>
        <string>$(PRODUCT_BUNDLE_IDENTIFIER).search</string>
    </dict>
</array>

Android设置

在你的android/app/src/main/AndroidManifest.xml文件中,确保你有以下权限(虽然对于快捷操作通常不需要额外权限,但这是一个好习惯):

<uses-permission android:name="android.permission.INTERNET"/>

然后,在你的android/app/src/main/res/xml/目录下创建一个新的XML资源文件(如果没有这个目录,请先创建),命名为shortcuts.xml,内容如下:

<shortcuts xmlns:android="http://schemas.android.com/apk/res/android">
    <shortcut
        android:shortcutId="compose"
        android:enabled="true"
        android:icon="@drawable/ic_compose"  <!-- 你需要有一个这样的图标资源 -->
        android:shortcutShortLabel="@string/compose_short"
        android:shortcutLongLabel="@string/compose_long">
        <intent
            android:action="android.intent.action.VIEW"
            android:targetPackage="com.example.yourapp"  <!-- 替换为你的包名 -->
            android:targetClass="com.example.yourapp.MainActivity"
            android:data="compose" />
    </shortcut>
    <shortcut
        android:shortcutId="search"
        android:enabled="true"
        android:icon="@drawable/ic_search"  <!-- 你需要有一个这样的图标资源 -->
        android:shortcutShortLabel="@string/search_short"
        android:shortcutLongLabel="@string/search_long">
        <intent
            android:action="android.intent.action.VIEW"
            android:targetPackage="com.example.yourapp"  <!-- 替换为你的包名 -->
            android:targetClass="com.example.yourapp.MainActivity"
            android:data="search" />
    </shortcut>
</shortcuts>

同时,在你的strings.xml文件中添加相应的字符串资源:

<resources>
    <string name="compose_short">Compose</string>
    <string name="compose_long">Start a new message</string>
    <string name="search_short">Search</string>
    <string name="search_long">Search for something</string>
</resources>

Flutter代码

在你的Flutter项目的lib目录下,打开或创建一个Dart文件(例如main.dart),并添加以下代码:

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

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

void _setupQuickActions() {
  QuickActions().initialize().then((QuickActionsState state) {
    if (state.containsKey('com.example.yourapp.compose')) {
      // 用户点击了"Compose"快捷操作
      _handleComposeShortcut();
    } else if (state.containsKey('com.example.yourapp.search')) {
      // 用户点击了"Search"快捷操作
      _handleSearchShortcut();
    }
  }).catchError((onError) {
    // 处理错误
    print("Error setting up quick actions: $onError");
  });

  // 监听快捷操作的变化
  QuickActions().addActionListener((String shortcutType) async {
    if (shortcutType == 'com.example.yourapp.compose') {
      _handleComposeShortcut();
    } else if (shortcutType == 'com.example.yourapp.search') {
      _handleSearchShortcut();
    }
  });
}

void _handleComposeShortcut() {
  // 处理Compose快捷操作的逻辑
  print("Compose shortcut pressed");
  // 例如,导航到某个页面
  // Navigator.push(context, MaterialPageRoute(builder: (context) => ComposePage()));
}

void _handleSearchShortcut() {
  // 处理Search快捷操作的逻辑
  print("Search shortcut pressed");
  // 例如,导航到某个页面
  // Navigator.push(context, MaterialPageRoute(builder: (context) => SearchPage()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Quick Actions Demo'),
        ),
        body: Center(
          child: Text('Press home button and swipe left to see quick actions'),
        ),
      ),
    );
  }
}

请注意,在_handleComposeShortcut_handleSearchShortcut方法中,我注释掉了导航到页面的代码。在实际应用中,你需要取消注释并根据你的应用逻辑进行相应的页面导航。

这就是如何在Flutter中使用quick_actions插件来处理快速操作的一个完整示例。希望这对你有所帮助!

回到顶部