如何使用FlutterShare插件分享内容

介绍

share 插件允许您为用户提供使用本机平台共享对话框共享内容的能力。

在本文中，您将构建一个包含鳄鱼列表的示例 Flutter 应用程序，并添加与其他用户共享鳄鱼的功能。

先决条件

要完成本教程，您需要：

• 下载并安装 Flutter。
• 下载并安装Android Studio 或 Visual Studio Code。
• 建议为您的代码编辑器安装插件： 为 Android Studio 安装了 Flutter 和 Dart 插件。 为 Visual Studio Code 安装了 Flutter 扩展。

本教程已使用 Flutter v2.0.6、Android SDK v31.0.2 和 Android Studio v4.1 进行了验证。

第 1 步 — 设置项目

为 Flutter 设置好环境后，您可以运行以下命令来创建新应用程序：

flutter create flutter_share_example

导航到新的项目目录：

cd flutter create flutter_share_example<^>

使用 flutter create 将生成一个演示应用程序，该应用程序将显示按钮被单击的次数。

第 2 步 — 添加 share 插件

在代码编辑器中打开 pubspec.yaml 并添加以下插件：

发布规范.yaml

dependencies:
  flutter:
    sdk: flutter

  share: 2.0.1

然后，将更改保存到您的文件。

第 3 步——搭建项目的脚手架

然后我们可以继续更新我们的 main.dart 文件以包含在 home_page.dart 中找到的 HomePage：

lib/main.dart

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

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(),
    );
  }
}

创建一个新的 home_page.dart 文件并使用代码编辑器打开它。 添加以下代码行：

lib/home_page.dart

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My favourite Alligators'),
      ),
      body: Container(),
    );
  }
}

MyHomePage 将是一个 StatefulWidget，其中包含一个 AppBar 和一个空的 Container。

然后，将更改保存到您的文件。

第 4 步 — 创建示例类

接下来，您将需要一个包含 name 和 description 的 Alligator 类，我们将使用它来生成我们的鳄鱼列表。

创建一个新的 alligator_model.dart 文件并在代码编辑器中打开它。 添加以下代码行：

lib/alligator_model.dart

import 'package:flutter/foundation.dart';

class Alligator {
  String name;
  String description;

  Alligator({@required this.name, @required this.description});
}

然后我们可以在 MyHomePage 内部创建一个 List<Alligator> 并将它们显示在屏幕上：

lib/home_page.dart

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Alligator> alligators = [
    Alligator(
      name: 'Crunchy',
      description: 'A fierce Alligator with many teeth.',
    ),
    Alligator(
      name: 'Munchy',
      description: 'Has a big belly, eats a lot.',
    ),
    Alligator(
      name: 'Grunchy',
      description: 'Scaly Alligator that looks menacing.',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My favourite Alligators'),
      ),
      body: Column(
        children: alligators
          .map((Alligator alligator) => Card(
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text(alligator.name),
                  subtitle: Text(alligator.description),
                ),
              ],
            ),
          ))
          .toList()
      ),
    );
  }
}

将 List 和 map 的内容添加到 List 中。

第 5 步 — 添加共享功能

为了做到这一点，每当用户点击 ListTile 时，我们将挂钩 onTap 功能，调用 share 函数：

lib/home_page.dart

import 'package:flutter/material.dart';
import 'package:share/share.dart';
import 'alligator_model.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Alligator> alligators = [
    Alligator(
      name: 'Crunchy',
      description: 'A fierce Alligator with many teeth.',
    ),
    Alligator(
      name: 'Munchy',
      description: 'Has a big belly, eats a lot.',
    ),
    Alligator(
      name: 'Grunchy',
      description: 'Scaly Alligator that looks menacing.',
    ),
  ];

  share(BuildContext context, Alligator alligator) {
    final RenderBox box = context.findRenderObject();

    Share.share("${alligator.name} - ${alligator.description}",
      subject: alligator.description,
      sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My favourite Alligators'),
      ),
      body: Column(
        children: alligators
          .map((Alligator alligator) => Card(
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text(alligator.name),
                  subtitle: Text(alligator.description),
                  onTap: () => share(context, alligator),
                ),
              ],
            ),
          ))
          .toList()
      ),
    );
  }
}

此代码将导入 share，定义 share 方法，并使用 onTap 调用它。

注意：我们需要确保我们通过捕获context.findRenderObject()为iPad设备传入sharePositionOrigin。

编译你的代码并让它在模拟器中运行：

其主要部分是 Share 函数，我们可以在其中提供 text 和可选的 subject，在本例中，我们使用它们将其传递给我们的消息传递应用程序。

结论

在本文中，您构建了一个包含鳄鱼列表的示例 Flutter 应用程序，并添加了与其他用户共享鳄鱼的功能。

如果您想了解有关 Flutter 的更多信息，请查看 我们的 Flutter 主题页面 以获取练习和编程项目。