Flutter无限滚动视图插件infinity_view的使用

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

Flutter无限滚动视图插件infinity_view的使用

infinity_view

简介 Infinity View 允许您轻松创建无限视口，无论是图像、画布还是整个应用程序——天空是你的限制！ 与 InteractiveViewer 不同，它没有边界，允许您进行缩放、平移和旋转。

特性
  • 支持所有平台，支持触摸、鼠标和触控板，并且具有设备特定的控制。
  • 高度可定制，允许您仅在满足某些条件时启用变换。
  • 无限的力量！ 您可以在您的 InfinityView 中放置任何内容，您可以从您的子级 widget 平移得更远，您可以缩放得更远。
开始

安装包：

flutter pub add infinity_view

导入包（如果使用 Notepad 作为 IDE）：

import 'package:infinity_view/infinity_view.dart';

最后将您想要的 widget 包裹在 InfinityView 中：

InfinityView(
  child: Image.network('https://i.imgur.com/tCoqEwy.gif');
)
使用

InfinityView 非常简单易用，只需将其包裹在一个 widget 中即可。 但，使 InfinityView 如此强大的是它的灵活性（上、下、左、右、进、出、以及 环游小镇—啊对了，这就是灵活的意思）。

默认情况下，旋转被禁用，但可以通过 shouldRotate 启用：

InfinityView(
  shouldRotate: true,
  child: ...,
)

如果您想限制哪些事件可以影响变换？您可以使用 translationTest、scaleTest 和 rotationTest。

这些参数接受一个 TransformTestCallback，提供 GenericTransformUpdateDetails 并返回一个布尔值。GenericTransformUpdateDetails 包含有关输入的信息，供您比较。

例如，如果您只想在右键按下时平移，您可以这样设置 translationTest：

InfinityView(
  translationTest: (details) => details.buttons == kSecondaryMouseButton,
  ...
)

这会起作用！但它也不考虑并非所有设备都使用鼠标，或者我们可以进一步深入：

InfinityView(
  translationTest: (details) {
    if(details.kind == PointerDeviceKind.mouse &&
       details.buttons != kSecondaryMouseButton)
      return false;
    return true;
  },
  ...
)

这将只允许在鼠标上使用右键点击进行平移，但现在它将接受任何触控板和平移事件。如果我们想要更加具体：

InfinityView(
  translationTest: (details) {
    return details.buttons == kSecondaryMouseButton ||
           details.pointerCount > 1  ||
           details.kind == PointerDeviceKind.trackpad;
  },
  ...
)

这将只在以下情况下平移：

  • 鼠标：右键被按下。
  • 触摸：两个手指（或更多）正在使用。
  • 触控板：总是。 原因是我们总是使用触控板，因为触控板发送的唯一事件是 PanZoomUpdate，这意味着有人在缩放、旋转或滚动。点击事件仍然被视为鼠标输入。

也许您希望根据外部条件仅允许某些变换。例如，您只想在按住控制键时缩放：

bool isControlPressed = false;

RawKeyboardEvent(
  onKey: (e) => isControlPressed = e.isControlPressed
child: InfinityView(
  scaleTest: (details) => isControlPressed,
  child: ...
),
)

很简单！

遇到问题吗？

您可能需要使用 shrinkWrap。

默认情况下，shrinkWrap 设置为 true。这将传递 InfinityView 的的约束给子级 widget。虽然 widget 不一定受到这些约束的限制，但它会影响布局。

如果您正在使用一个具有无限大小的 widget，如 Stack，必须将 shrinkWrap 设置为 true，因为您不能在一个无限大小的 widget 内部包含另一个无限大小的 widget。

通过关闭 shrinkWrap，InfinityView 将有一个最大尺寸为无限大，这意味着不会传递给子级 widget 任何约束。这意味着子级 widget 必须有一个定义的大小小于无穷大。

为了展示 shrinkWrap 的工作原理，这里是一个非常基本的例子：

InfinityView(
  shrinkWrap: true, // 这是默认值。
  child: FlutterLogo(size: 5000),
)

如果我们将 shrinkWrap 设置为 false，它不再受父容器的约束，并可以占据其全部大小。

两者都是无限可变形的。

再次强调，仅仅因为约束传递给了子级容器并不意味着它不能超出这些约束。您可以在 Stack 中使用 shrinkWrap，但如果不这样做就会出现错误。

InfinityView(
  shrinkWrap: true, // 这是默认值，指定这个不是必需的。
  child: const Stack(
    alignment: Alignment.center,
    clipBehavior: Clip.none,
    children: [
      Positioned(
        width: 5000,
        height: 5000,
        child: FlutterLogo()
      ),
    ]
  ),
)

更多关于Flutter无限滚动视图插件infinity_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter无限滚动视图插件infinity_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用infinity_view插件来实现无限滚动视图的示例代码。infinity_view是一个用于创建无限滚动列表的Flutter插件。请注意，实际使用时，你需要确保已经在pubspec.yaml文件中添加了infinity_view依赖。

首先，确保你的pubspec.yaml文件包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  infinity_view: ^最新版本号  # 请替换为实际的最新版本号

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

接下来是一个简单的示例代码，展示如何使用infinity_view来创建一个无限滚动的列表：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Infinity View Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: InfinityViewExample(),
    );
  }
}

class InfinityViewExample extends StatefulWidget {
  @override
  _InfinityViewExampleState createState() => _InfinityViewExampleState();
}

class _InfinityViewExampleState extends State<InfinityViewExample> {
  final List<String> initialData = List.generate(20, (index) => "Item $index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Infinity View Example'),
      ),
      body: InfinityListView.builder(
        itemCount: initialData.length, // 初始数据项数量
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(initialData[index]),
          );
        },
        onLoadMore: () async {
          // 模拟加载更多数据
          List<String> newData = List.generate(20, (index) => "Item ${initialData.length + index}");
          setState(() {
            initialData.addAll(newData);
          });
          return newData.length; // 返回实际加载的数据项数量
        },
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，其中包含一个使用InfinityListView.builder构建的列表。
  2. initialData是一个包含初始数据的列表。
  3. InfinityListView.builder的itemCount属性设置为初始数据的长度。
  4. itemBuilder回调用于构建每个列表项。
  5. onLoadMore回调用于加载更多数据。当用户滚动到底部时，这个回调会被触发。在这个示例中，我们模拟加载了更多的数据，并将它们添加到initialData列表中。

请注意，onLoadMore回调是异步的，允许你进行网络请求或其他耗时操作来加载数据。在实际应用中，你应该根据网络请求的结果来更新数据列表。

这个示例提供了一个基本的框架，你可以根据需要进行扩展和修改，例如添加错误处理、加载指示器或优化性能。

回到顶部