Flutter 基础布局Widgets之FittedBox详解

132.jpg

FittedBox概述

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

FittedBox构造函数

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

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

image

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

image

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

image

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

image

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

image

none(将源文件对齐到目标框内(默认情况下居中)，并丢弃位于框外的源文件的任何部分。
源映像没有调整大小。):

image

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

image

• alignment child对齐方式

简单示例

// fittedBox
import '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