Flutter画中画模式插件pip_mode的使用

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

Flutter画中画模式插件pip_mode的使用

pip_mode 插件可以将任何小部件发送到画中画（PiP）模式，提供了一种无缝方式，在用户导航到其他应用时保持内容可见。

功能

  • 自定义内容：封装任何小部件并以画中画模式显示。
  • 视频转换支持：自动将小部件转换为视频以便在画中画模式下播放。

pip_mode截图

开始使用

Android

  1. 打开 android > app > build.gradle 文件，并将 minSDK 设置为 24 或更高版本。
  2. 在 AndroidManifest.xml 中启用 MainActivity 的画中画支持。
<activity
    android:name=".MainActivity"
    ...
    android:supportsPictureInPicture="true"
    ...>

iOS

  1. 将最低部署目标设置为 12.1 或更高版本。
  2. 打开 ios > Runner > Info.plist 文件，并在根 <dict> 内添加以下行以添加 Background Modes 能力并启用 音频, AirPlay 和 画中画。
<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
    <string>AirPlay</string>
    <string>picture-in-picture</string>
</array>
  1. 对于 iOS，建议在真实设备上进行测试。

使用方法

final _controller = PipController();

GestureDetector(
    onTap: _controller.startPipMode,
    child: PipWidget(
        controller: _controller,
        onInitialized: (success) => log('Pip Widget Initialized: $success'),
        child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
            alignment: Alignment.center,
            child: Text('Hello World!'),
        ),
    ),
),

完整示例代码

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:pip_mode/pip_mode.dart';

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

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

  final _controller1 = PipController();
  final _controller2 = PipController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('PiP Demo')),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              GestureDetector(
                onTap: _controller1.startPipMode,
                child: PipWidget(
                  controller: _controller1,
                  onInitialized: (success) {
                    log('Pip Widget 1 Initialized: $success');
                  },
                  child: Container(
                    width: 200,
                    height: 200,
                    color: Colors.red,
                    alignment: Alignment.center,
                    child: Text('Hello World!'),
                  ),
                ),
              ),
              GestureDetector(
                onTap: _controller2.startPipMode,
                child: PipWidget(
                  controller: _controller2,
                  onInitialized: (success) {
                    log('Pip Widget 2 Initialized: $success');
                  },
                  child: Container(
                    width: 200,
                    height: 200,
                    color: Colors.green,
                    alignment: Alignment.center,
                    child: Text('World Hello!'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter画中画模式插件pip_mode的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter画中画模式插件pip_mode的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用pip_mode插件来实现画中画（Picture-in-Picture, PiP）模式的示例代码。首先，确保你已经在pubspec.yaml文件中添加了pip_mode依赖项：

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

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

接下来，你需要在Android和iOS上进行一些配置，以启用画中画模式。这里主要关注Flutter代码部分，但简要提及平台配置：

Android配置

在AndroidManifest.xml中，添加对画中画模式的支持：

<activity
    android:name=".MainActivity"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize"
    android:supportsPictureInPicture="true">
    ...
</activity>

iOS配置

对于iOS，你需要在Info.plist中添加对画中画模式的支持：

<key>UIRequiresFullScreen</key>
<false/>

然后，你可以开始编写Flutter代码来使用pip_mode插件。

Flutter代码示例

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  PipModeController? _pipController;

  @override
  void initState() {
    super.initState();
    _pipController = PipModeController();
  }

  @override
  void dispose() {
    _pipController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter PiP Mode Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 启动视频播放器或其他内容（这里仅作为示例）
                await _pipController?.enterPipModeWith(
                  context,
                  child: Container(
                    color: Colors.red,
                    child: Center(
                      child: Text('PiP Content'),
                    ),
                  ),
                );
              },
              child: Text('Enter PiP Mode'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。点击按钮时，将调用PipModeController的enterPipModeWith方法，将当前上下文中的某个小部件（在这个例子中是一个红色的容器）以画中画模式显示。

请注意，实际使用中，你通常会传递一个视频播放器或其他媒体内容的小部件，而不是一个简单的容器。此外，你可能需要处理更多画中画模式相关的回调和事件，例如当用户调整画中画窗口大小或关闭它时。

确保在实际项目中根据具体需求调整和扩展此代码。

回到顶部