Flutter自定义PIP窗口大小插件pip_view_custom_size的使用

Flutter自定义PIP窗口大小插件pip_view_custom_size的使用

插件简介

这是一个从 pip_view 分支出来的插件，允许自定义浮动小部件的大小。

插件功能

该插件提供了一个可以展示在浮动小部件下方的视图，并支持将浮动小部件移动到角落。

使用方法

创建一个 PIPView 小部件，builder 属性将是请求时浮动显示的视图。要在一个浮动视图下方展示一个视图，请使用 PIPView.of(context).presentBelow(MyWidget(), initialWidgetSize: Size(280, 320))。initialWidgetSize 是可选的。通过添加它，您可以设置浮动视图/小部件的初始大小。如果未设置 initialWidgetSize，浮动视图/小部件将占用整个屏幕。

属性说明：

• avoidKeyboard: 浮动视图是否应避免键盘；
• builder: 构建浮动小部件的构造器，第二个参数表示视图是否浮动；
• floatingWidget: 一个特定的小部件用于浮动，这是可选的。当设置此属性时，构建器内的父级小部件将被忽略；
• initialCorner: 浮动视图最初粘贴的角落
  • 可能的值有：PIPViewCorner.topLeft, PIPViewCorner.topRight, PIPViewCorner.bottomLeft, PIPViewCorner.bottomRight；
• floatingHeight: 浮动前景视图的高度。如果没有设置，则根据 floatingWidth 计算以保持屏幕的纵横比；
• floatingWidth: 浮动前景视图的宽度。如果没有设置且 floatingHeight 已设置，则根据 floatingHeight 的值计算以保持屏幕的纵横比。如果没有设置且 floatingHeight 也没有设置，默认为 100.0；

示例代码

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

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final contKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义浮动视图
    final floatingView = Container(
      key: contKey,
      width: 200,
      height: 200,
      color: Colors.red,
      child: Center(
        child: Text('这是浮动的小部件！'),
      ),
    );

    return PIPView(
      builder: (context, isFloating) {
        return Scaffold(
          resizeToAvoidBottomInset: !isFloating, // 是否调整底部插入位置以避免键盘
          body: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  floatingView,
                  Text('这个页面不会浮动！'),
                  MaterialButton(
                    color: Theme.of(context).primaryColor,
                    child: Text('开始浮动！'),
                    onPressed: () {
                      // 获取浮动容器的当前大小
                      final floatingContSize = contKey.currentContext?.size;
                      PIPView.of(context)!.presentBelow(
                        BackgroundScreen(),
                        initialWidgetSize: floatingContSize,
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

class BackgroundScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text('这是背景页面！'),
              Text('如果您点击浮动屏幕，它将停止浮动。'),
              Text('导航如预期工作。'),
              MaterialButton(
                color: Theme.of(context).primaryColor,
                child: Text('导航到新页面'),
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (_) => NavigatedScreen(),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class NavigatedScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('导航页面'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text('这是您导航到的页面。'),
              Text('看它如何停留在浮动页面下面？'),
              Text('太棒了！'),
              Spacer(),
              Text('它还避免了键盘！'),
              TextField(),
            ],
          ),
        ),
      ),
    );
  }
}