Flutter 缩放布局

Flutter 缩放布局(FittedBox)，FittedBox组件主要做两件事情，缩放（Scale）和位置调整（Position）。

FittedBox会在自己的尺寸范围内缩放并调整child位置，使child适合其尺寸。了解移动端的读者可能会联想到ImageView组件，它是将图片在其范围内按照规则进行缩放位置调整。FittedBox跟ImageView有些类似，可以猜出，它肯定有一个类似于ScaleType的属性。

布局行为分两种情况：

• 如果外部有约束，则按照外部约束调整自身尺寸，然后缩放调整child，按照指定的条件进行布局。
• 如果没有外部约束条件，则与child的尺寸保持一致，指定的缩放以及位置属性将不起作用。

Fitted Box组件有fit和alignment两个重要属性，如下所示。

• fit：缩放的方式，默认的属性是BoxFit.contain，child在FittedBox范围内，尽可能大，但是不超出其尺寸。这里需要注意一点，contain是在保持着child宽高比的大前提下，尽可能填满。一般情况下，宽度或者高度达到最大值时，就会停止缩放。fit属性的各个取值对应的布局示意图如图所示。BoxFit.none没有任何填充模式，如图所示:
  

Boxfit.fill为不按宽高比填充模式，内容不会超过容器范围，效果如图所示:

BoxFit.contain为按宽高比等比填充模式，内容不会超过容器范围，效果如图所示:

BoxFit.cover为按原始尺寸填充整个容器模式，内容有可能会超过容器范围，效果如图所示:

BoxFit.fit width及BoxFit.fit height分别是按宽/高填充整个容器的模式，内容不会超过容器范围，效果如图所示:

注意 图左侧为按宽度填充，右侧为按高度填充。

BoxFit.scaleDown会根据情况缩小范围，有时和BoxFit.contain一样，有时和BoxFit.none一样，内容不会超过容器范围，如图所示:

• alignment：设置对齐方式，默认的属性是Align-ment.center，居中显示child。填充布局的示例代码如下：

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FittedBox缩放布局示例'),
      ),
      // 外部容器
      body: Container(
        color: Colors.grey,
        width: 250.0,
        height: 250.0,
        // 缩放布局
        child: FittedBox(
          // 宽高等比填充
          fit: BoxFit.contain,
          // 对齐属性：左上角对齐
          alignment: Alignment.topLeft,
          // 内部容器
          child: Container(
              color: Colors.deepOrange,
              child: Text("缩放布局"),
          ),
        ),
      ),
    );
  }
}
void main() {
  runApp(
    MaterialApp(
      title: 'FittedBox缩放布局示例',
      home: LayoutDemo(),
    ),
  );
}

酷客教程相关文章：

• Flutter 垂直布局
• Flutter 水平布局
• Flutter 对齐布局
• Flutter 填充布局