在脚手架体内同时进行2D滚动(设计应用程序miro或figma)

Question

我是个新手开发人员

我需要一些关于2D滚动的指导，我可以在其中放置小部件，并滚动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的动态小部件