Flutter 中 FittedBox

FittedBox 是 Flutter 中的一个布局小部件，用于调整其子部件的大小以适应其边界框。它可以根据子部件的大小自动调整缩放比例，使得子部件可以完全适应父部件的大小，而不会超出或裁剪。

FittedBox 可以有两种调整模式：

• BoxFit.contain：保持子部件的纵横比，缩放子部件以完全适应父部件的边界框，可能会留有空白。
• BoxFit.cover：保持子部件的纵横比，缩放子部件以填充父部件的边界框，可能会裁剪子部件的一部分。

下面是一个简单的示例代码，演示如何使用 FittedBox：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FittedBox Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                child: FittedBox(
                  fit: BoxFit.contain,
                  child: Image.asset('assets/flutter_logo.png'),
                ),
              ),
              SizedBox(height: 20),
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
                child: FittedBox(
                  fit: BoxFit.cover,
                  child: Image.asset('assets/flutter_logo.png'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含两个 FittedBox 的 Column。每个 FittedBox 都包含一个 Image 小部件，它们都使用 BoxFit.contain 和 BoxFit.cover 调整模式。

在第一个 FittedBox 中，BoxFit.contain 模式被使用，这意味着图片会按比例缩放以适应容器，并且可能会留有一些空白。

在第二个 FittedBox 中，BoxFit.cover 模式被使用，这意味着图片会按比例缩放以填充容器，可能会有一部分图片被裁剪。

FittedBox 对于处理不同大小的子部件或需要保持纵横比的图像等情况非常有用。