flutter - 在脚手架主体中同时进行 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'),
                );
              }),
            );
          }),
        ),
      ),
    );
  }
}