Flutter 缩放布局

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

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

布局行为分两种情况:

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

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

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

Flutter 缩放布局

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

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

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

BoxFit.fit widthBoxFit.fit height分别是按宽/高填充整个容器的模式,内容不会超过容器范围,效果如图所示:
Flutter 缩放布局

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

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

  • 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(),
    ),
  );
}

酷客教程相关文章:

赞(0)

评论 抢沙发

评论前必须登录!