Flutter双视图展示插件open_dual_view的使用

Flutter双视图展示插件open_dual_view的使用

open_dual_view 插件为 Flutter 提供了在 Android 设备上以双视图模式打开其他应用程序的功能。双视图模式允许用户同时查看和与两个应用交互。

特性

  • 在双视图模式下打开应用程序。
  • 通过包名或 URI 方案启动应用程序。

开始使用

1. 添加依赖

在您的 pubspec.yaml 文件中添加 open_dual_view 依赖:

dependencies:
  flutter:
    sdk: flutter
  open_dual_view: ^1.0.0  # 检查 pub.dev 上的最新版本

2. 导入包

在 Dart 代码中导入 open_dual_view 包:

import 'package:open_dual_view/open_dual_view.dart';

3. 使用方式

可以通过指定包名或 URI 来在双视图模式下打开应用程序。注意,至少需要提供其中一个参数。

import 'package:open_dual_view/open_dual_view.dart';

Future<void> openAppInDualView() async {
  try {
    // 通过包名打开应用程序
    await OpenDualView.openInDualView(
      packageName: 'com.example.myapp', // 替换为目标应用的包名
    );

    // 或者通过 URI 打开应用程序或内容
    await OpenDualView.openInDualView(
      uri: 'example://content', // 替换为目标 URI
    );
  } catch (e) {
    print('未能在双视图模式下打开应用程序: $e');
  }
}

开发注意事项

可以使用 getAvailablePackagesName 获取可用的应用程序包名列表(如果需要通过包名打开应用程序)。如果遇到问题,请参考下方的已知问题和建议。


4. 平台支持

open_dual_view 插件适用于支持双视图模式的 Android 设备,最低支持 Android SDK 30(Android 11)及以上。

最低 SDK 版本

此插件要求最低 SDK 版本为 30(Android 11)。确保您的 android/app/build.gradle 文件中包含以下配置:

android {
    defaultConfig {
        minSdkVersion 30
    }
}

注意事项

  • Android 11 (API level 30) 及更高版本引入了对应用程序查询机制的更改。在 AndroidManifest.xml 中使用 <queries> 元素来声明您的应用程序打算查询哪些包。确保您的应用程序包含必要的 <queries> 元素以指定需要交互的包。

  • 权限:此包不使用 <QUERY_ALL_PACKAGES> 权限,而是仅通过 <queries> 元素查询特定包。

如果要通过包名打开应用程序,请确保您的 AndroidManifest.xml 配置正确(由于 Android 的包可见性过滤机制,这可能不可靠):

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

    <application>
    </application>
    <!-- 声明需要查询的包 -->
    <queries>
        <package android:name="com.twitter.android" />
        <!-- 添加更多包 -->
    </queries>
</manifest>

已知问题和建议

  • 包名限制:通过包名打开应用程序可能无法正常工作,因为目标应用程序可能存在限制或特殊配置。如果遇到此类问题,建议改用 URI。

  • 使用 URI:如果目标应用程序支持通过 URI 方案进行深度链接,则使用 URI 方法更为可靠。确保目标应用程序支持您使用的 URI 方案。

  • 自定义 Intent:如果您是目标应用程序的开发者,请考虑实现 Intent 处理逻辑,以确保应用程序能够正确打开并实现深度链接功能。


贡献

我们欢迎对 open_dual_view 插件的贡献!

  1. 报告问题:如果发现任何错误或问题,请在 GitHub 上提交问题,并提供尽可能多的详细信息,包括重现步骤、日志和截图。

  2. 提出功能建议:如果您有新功能或改进的想法,请在 GitHub 上提交建议。描述您的想法并解释它如何增强插件。

免责声明open_dual_view 插件的功能也可以通过 android_intent_plus 插件实现。目前,open_dual_view 插件专注于双视图模式功能,并提供独特的接口。随着 Android API 的发展,我们将计划在该插件中实现更多独特功能。

如有更多问题或需要帮助,请随时联系我们。

祝您编码愉快!


完整示例代码

以下是完整的示例代码,展示如何使用 open_dual_view 插件。

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('open_dual_view 示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                // 通过包名打开应用程序
                await OpenDualView.openInDualView(
                  packageName: 'com.example.myapp',
                );

                // 或者通过 URI 打开应用程序或内容
                await OpenDualView.openInDualView(
                  uri: 'example://content',
                );
              } catch (e) {
                print('未能在双视图模式下打开应用程序: $e');
              }
            },
            child: Text('打开双视图模式'),
          ),
        ),
      ),
    );
  }
}
1 回复

更多关于Flutter双视图展示插件open_dual_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


open_dual_view 是一个用于在 Flutter 应用中实现双视图展示的插件。它允许你在同一个屏幕上同时展示两个视图,通常用于需要并排显示内容的场景,比如对比视图、分屏浏览等。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  open_dual_view: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本使用

以下是一个简单的示例,展示如何使用 open_dual_view 插件来创建一个双视图布局。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DualViewExample(),
    );
  }
}

class DualViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dual View Example'),
      ),
      body: OpenDualView(
        leftView: Container(
          color: Colors.blue,
          child: Center(
            child: Text(
              'Left View',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
        rightView: Container(
          color: Colors.red,
          child: Center(
            child: Text(
              'Right View',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
        dividerColor: Colors.black,
        dividerWidth: 2.0,
        initialDividerPosition: 0.5, // 初始分割线位置,0.0 到 1.0 之间
      ),
    );
  }
}

参数说明

  • leftView: 左侧视图的 Widget。
  • rightView: 右侧视图的 Widget。
  • dividerColor: 分割线的颜色。
  • dividerWidth: 分割线的宽度。
  • initialDividerPosition: 初始分割线的位置,取值范围为 0.01.0,表示分割线在屏幕上的相对位置。

自定义分割线

你可以通过 dividerColordividerWidth 来自定义分割线的外观。如果你需要更复杂的分割线,可以自定义一个 Widget 并将其作为 divider 参数传递。

动态调整分割线位置

OpenDualView 允许用户通过拖动分割线来动态调整左右视图的大小。你可以通过监听 onDividerPositionChanged 回调来获取分割线的当前位置。

OpenDualView(
  leftView: Container(
    color: Colors.blue,
    child: Center(
      child: Text(
        'Left View',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
  rightView: Container(
    color: Colors.red,
    child: Center(
      child: Text(
        'Right View',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
  dividerColor: Colors.black,
  dividerWidth: 2.0,
  initialDividerPosition: 0.5,
  onDividerPositionChanged: (double position) {
    print('Divider position: $position');
  },
)
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!