脚手架主体中的同步 2D 滚动（设计应用程序 miro 或 Figma）

Question

我是一名 Flutter 开发新手

我需要一些有关 2D 滚动的指导，我可以将小部件放入主体中并滚动 2D（垂直、水平和对角滚动）

我不需要实际的代码，但需要关于我应该使用哪些小部件或逻辑的指导。

figma 有 2d 滚动，这正是我想要的示例。

很抱歉，我没有任何初始代码可提供，因为我不知道从哪里开始。

Answer 1

InteractiveViewer

可能就是您所需要的：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('InteractiveViewer')),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(200),
        constrained: false,
        minScale: 0.1,
        maxScale: 2,
        child: Column(
          children: List.generate(100, (i) {
            return Row(
              children: List.generate(100, (j) {
                return Container(
                  width: 100,
                  height: 50,
                  decoration: BoxDecoration(border: Border.all()),
                  child: Text('$i:$j'),
                );
              }),
            );
          }),
        ),
      ),
    );
  }
}

Answer 2

您可以使用 SingleChildScrollView 或 listView 来实现类似的静态小部件。

如果您有动态小部件，则可以使用 ListView.builder

Answer 3

检查这个包，你可能会发现一些有用的东西，它具有页面视图物理的 2D 滚动TwoDimensionalPageView