flutter收缩组件_Flutter 基础布局Widgets之FittedBox详解

FittedBox概述

FittedBox组件的作用是对child组件进行缩放和对齐方式的设置，其缩放的参数为fit，有多种选择的方式，而对齐方式alinment用法则和之前一致，即很多都是相通的。

FittedBox构造函数

const FittedBox({ Key key, this.fit = BoxFit.contain, this.alignment = Alignment.center, Widget child, })

• fit 即child的缩放方式，比如以下缩放方式：
• fill(通过扭曲源的纵横比填充目标框。):

contain(尽可能大，同时仍然将源完全包含在目标框中):

cover(尽可能小，同时仍然覆盖整个目标框):

fitWidth(确保显示了源的全部宽度，不管这是否意味着源垂直地溢出目标框):

fitHeight(确保显示源的完整高度，不管这是否意味着源水平地溢出目标框):

none(将源文件对齐到目标框内(默认情况下居中)，并丢弃位于框外的源文件的任何部分。

源映像没有调整大小。):

scaleDown(将源文件对齐到目标框内(默认情况下，居中)，如果需要，将源文件向下缩放，以确保源文件适合框内，这与contains相同，如果它会收缩图像，则它与none相同):

• alignment child对齐方式

简单示例

// fittedBoximport 'package:flutter/material.dart';class FittedBoxLearn extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('FittedBox'), ), body: Center( child: Container( width: 300, height: 400, decoration: BoxDecoration( border: Border.all(),  ), // 根据内部child伸缩填充父容器 child: FittedBox( // 填充方式 比如contain 尽可能大，同时仍然将源完全包含在目标框中。 还有cover、fill、fitWidth、fitHeight等方式 fit: BoxFit.contain, // 对齐方式 alignment: Alignment(0, 0), child: Container( color: Colors.blueAccent, width: 30, height: 30, ) ), ), )); }}

示例效果

E4F43F9BA9B8953BC27488883B30B82F.png