[Flutter翻译]Flutter中的快速行动

Sunbreak
408 阅读4分钟

允许您管理并与应用程序的主屏幕快速动作进行互动。

原文地址：medium.com/flutterdevs…

原文作者：medium.com/@Anmol__Gup…

发布时间：2020年12月30日

image.png

大家好，我欢迎大家来到我的新博客，关于flutter中的快速操作。这个功能不是最常用的功能，但当我们的应用程序的路由变得更大时，这个功能将真正帮助我们的用户直接导航到一个特定的屏幕。 尽管用户对这一功能的需求较少，但有时我们的客户可能会要求它。所以让我们开始学习如何实现它。

使用的包。

quick_actions | Flutter 包

这个 Flutter 插件允许您管理并与应用程序的主屏幕快速动作互动。快速动作... pub.dev

编辑pubspec.yaml文件。

在你的 pubspec.yaml 文件中安装以下依赖项。

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
  quick_actions: ^0.4.0+10

了解 quick_actions 包。

在进入编码部分之前，让我们先了解这个包所提供的方法。

  • 初始化

这个方法初始化这个包。在进一步互动之前，首先调用这个方法。

  • setShortcutItems

这个方法接收一个成为快速动作的ShortcutItem的列表。

  • clearShortcutItems

它从快速操作项目列表中删除所有的ShortcutItem。

让我们来写代码。

创建一个QuickActions的对象。

QuickActions quickActions = QuickActions();

在initState方法中初始化quickActions对象。

void initState() {
  super.initState();
  quickActions.initialize((String shortcutType) {
  });
}

初始化setShortcutItems :

void initState() {
  super.initState();
  quickActions.initialize((String shortcutType) {
  });

  quickActions.setShortcutItems(<ShortcutItem>[
    ShortcutItem(
      type: 'second page',
      localizedTitle: 'New Page',
    ),
  ]);
}

ShortcutItem是quick_actions包内的一个类，用于建立一个快速动作项。它需要一个类型、本地化标题、图标参数。类型是一个参数，当点击ShortcutItem时，会传递给initialize方法。localizedTitle是ShortcutItem的标题，会在长按应用程序图标时显示。

在点击ShortcutItem时导航到一个新的页面。

quickActions.initialize((String shortcutType) {
  Navigator.of(context).push(MaterialPageRoute(
      builder: (_) => SecondPage(
            title: shortcutType,
          )));
});

我们只需要在初始化方法里面传递推送方法，该方法将导航到SecondPage。

SecondPage小部件。

class SecondPage extends StatelessWidget {
  final String title;

  SecondPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

image.png

让我们创建一个多项目列表，并通过点选项目来处理每个屏幕。

将项目添加到ShortcutItem列表中。

quickActions.setShortcutItems(<ShortcutItem>[
  ShortcutItem(
    type: 'cart_page',
    localizedTitle: 'Cart Page',
  ),
  ShortcutItem(
    type: 'order_page',
    localizedTitle: 'Order Page',
  ),
  ShortcutItem(
    type: 'notification_page',
    localizedTitle: 'Notification Page',
  ),
  ShortcutItem(
    type: 'place_order',
    localizedTitle: 'Place Order',
  ),
]);

为每个ShortcutItem创建四个不同的类。

class CartPage extends StatelessWidget {
  final String title;

  CartPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

class OrderPage extends StatelessWidget {
  final String title;

  OrderPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

class PlaceOrder extends StatelessWidget {
  final String title;

  PlaceOrder({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

class NotificationPage extends StatelessWidget {
  final String title;

  NotificationPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

为了处理所有的手势，我们将使用一个开关案例，它将检查快捷键类型并将其导航到给定的页面。

quickActions.initialize((String shortcutType) {
  switch (shortcutType) {
    case 'cart_page':
      return _navigate(CartPage(
        title: shortcutType,
      ));
    case 'order_page':
      return _navigate(OrderPage(
        title: shortcutType,
      ));
    case 'notification_page':
      return _navigate(NotificationPage(
        title: shortcutType,
      ));
    case 'place_order':
      return _navigate(PlaceOrder(
        title: shortcutType,
      ));
    default:
      return MaterialPageRoute(builder: (_) {
        return Scaffold(
          body: Center(
            child: Text('No Page defined for $shortcutType'),
          ),
        );
      });
  }
});

导航方法。

_navigate(Widget screen) {
  Navigator.of(context).push(MaterialPageRoute(builder: (_) => screen));
}

演示模块。

1.gif

完整的代码文件。

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  QuickActions quickActions = QuickActions();

  _navigate(Widget screen) {
    Navigator.of(context).push(MaterialPageRoute(builder: (_) => screen));
  }

  @override
  void initState() {
    super.initState();
    quickActions.initialize((String shortcutType) {
      switch (shortcutType) {
        case 'cart_page':
          return _navigate(CartPage(
            title: shortcutType,
          ));
        case 'order_page':
          return _navigate(OrderPage(
            title: shortcutType,
          ));
        case 'notification_page':
          return _navigate(NotificationPage(
            title: shortcutType,
          ));
        case 'place_order':
          return _navigate(PlaceOrder(
            title: shortcutType,
          ));
        default:
          return MaterialPageRoute(builder: (_) {
            return Scaffold(
              body: Center(
                child: Text('No Page defined for $shortcutType'),
              ),
            );
          });
      }
    });

    quickActions.setShortcutItems(<ShortcutItem>[
      ShortcutItem(
        type: 'cart_page',
        localizedTitle: 'Cart Page',
      ),
      ShortcutItem(
        type: 'order_page',
        localizedTitle: 'Order Page',
      ),
      ShortcutItem(
        type: 'notification_page',
        localizedTitle: 'Notification Page',
      ),
      ShortcutItem(
        type: 'place_order',
        localizedTitle: 'Place Order',
      ),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Homepage'),
      ),
      body: const Center(
        child: Text('Welcome to homepage'),
      ),
    );
  }
}

class CartPage extends StatelessWidget {
  final String title;

  CartPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

class OrderPage extends StatelessWidget {
  final String title;

  OrderPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

class PlaceOrder extends StatelessWidget {
  final String title;

  PlaceOrder({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

class NotificationPage extends StatelessWidget {
  final String title;

  NotificationPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

在Linkedin上与我联系

ANMOL GUPTA - FLUTTER DEVELOPER - AeoLogic Technologies | LinkedIn

在世界最大的专业社区LinkedIn上查看ANMOL GUPTA的资料。ANMOL在他们的网站上有2个工作。

www.linkedin.com

谢谢你阅读这篇文章❤

如果我说错了什么？请在评论中告诉我。我很愿意改进。

拍手👏 如果这篇文章对你有帮助。

如果我们弄错了什么？请在评论中告诉我。我们很愿意改进。

FlutterDevs的Flutter开发者团队，打造高质量和功能丰富的应用程序。根据您的要求，为您的跨平台Flutter移动应用程序项目按小时或全职雇用Flutter开发人员 您可以在Facebook、GitHub、Twitter和LinkedIn上与我们联系，了解任何与flutter相关的疑问。

我们欢迎反馈，并希望您使用#FlutterDevs分享您的工作内容。我们非常乐于看到您如何使用 Flutter 构建美丽、互动的网络体验！。

www.deepl.com 翻译

avatar
文章
阅读
粉丝