flutter 小部件 InteractiveViewer inside Scaffold body

Question

我在 Scaffold 中有InteractiveViewer ，其中一次我有橫向圖像，另一次是縱向圖像。 但是InteractiveViewer的尺寸總是有頁面啟動時的尺寸。 如何允許在InteractiveViewer內顯示全身圖像？ 這是代碼：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body:Center( child: InteractiveViewer(
          boundaryMargin: const EdgeInsets.all(20.0),
          maxScale: 5.0,
          child: FlutterLogo(size: 100),
        ),),)
      
    );
  }
}

output 當我用手指在InteractiveViewer中調整 object 的大小時： 但我希望：

Answer 1

您可以使用clipBehavior: Clip.none,但視圖取決於內部大小。 也可以在constrained: false

 InteractiveViewer(
    boundaryMargin: const EdgeInsets.all(2.0),
    clipBehavior: Clip.none,
    maxScale: 5.0,
    child: FlutterLogo(size: 100)),

但是對於InteractiveViewer ，孩子必須更大

body: Center(
  child: InteractiveViewer(
    boundaryMargin: const EdgeInsets.all(2.0),
    maxScale: 5.0,
    minScale: 1,
    child: SizedBox(
      width: 500, // this
      height: 500,
      child: Center(child: FlutterLogo(size: 100)),
    ),
  ),
),