Flutter二维滚动视图插件 single_child_two_dimensional_scroll_view 的使用

single_child_two_dimensional_scroll_view 是一个允许单个子组件在两个维度（垂直和水平）上滚动的Flutter插件。该插件基于Flutter框架的二维基础构建，提供了灵活的二维滚动功能。

特性

• 提供了 SingleChildTwoDimensionalScrollView 小部件，支持在垂直和水平方向上滚动。
• 支持对角线滚动或通过 diagonalDragBehavior 类型锁定轴。

开始使用

添加依赖

首先，在你的 pubspec.yaml 文件中添加 single_child_two_dimensional_scroll_view 作为依赖项：

dependencies:
  single_child_two_dimensional_scroll_view: ^最新版本号

然后运行以下命令来安装包：

$ flutter pub get

导入包

在Dart代码中导入该包：

import 'package:single_child_two_dimensional_scroll_view/single_child_two_dimensional_scroll_view.dart';

使用示例

下面是一个完整的示例，展示了如何使用 SingleChildTwoDimensionalScrollView 来创建一个可以双向滚动的2000x2000像素大小的子组件。

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

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final ScrollController verticalScrollController = ScrollController();
  late final ScrollController horizontalScrollController = ScrollController(); // 修正拼写错误
  bool _isLeftToRight = true;

  @override
  void dispose() {
    verticalScrollController.dispose();
    horizontalScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Example 2D Single Child Scroll View',
      home: Scaffold(
        body: GestureDetector(
          onTap: () => setState(() {
            _isLeftToRight = !_isLeftToRight;
          }),
          child: Directionality(
            textDirection: _isLeftToRight ? TextDirection.ltr : TextDirection.rtl,
            child: Scrollbar(
              controller: verticalScrollController,
              child: Scrollbar(
                controller: horizontalScrollController, // 修正拼写错误
                child: SingleChildTwoDimensionalScrollView(
                  verticalController: verticalScrollController,
                  horizontalController: horizontalScrollController,
                  child: ColoredBox(
                    color: Colors.white,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        padding: const EdgeInsets.all(8),
                        color: Colors.blue,
                        width: 1500,
                        height: 1500,
                        child: Center(
                          child: Text(List.filled(1400, 'hello world').join(' ')),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这个例子中，我们创建了一个可以左右切换文本方向的应用，并且包含了一个可以在两个方向上滚动的大面积蓝色容器，其中填充了大量的 “hello world” 文本。通过点击屏幕，你可以切换文本的方向（从左到右或从右到左）。此外，还为垂直和水平滚动条添加了视觉反馈。