Flutter深入浅出组件篇---SizeBox、FittedBox

SizeBox介绍

SizeBox 是一个指定尺寸的盒子，一般用来限制子控件的大小，能强制子控件具有特定宽度和高度。

示例代码

本文中很多效果都没有截图，可下载源代码运行项目源代码地址，或者通过视频教程查看视频教程地址

什么情况下使用SizeBox?

我们知道按钮是不能设定宽度和高度的，如果我们需要自定按钮的宽度和高度，那么就可以用SizeBox 来进行限制。

SizeBox属性和说明

字段	属性	描述
width	double	盒子的宽度
height	double	盒子的高度

SizeBox属性详细使用

1、width、height

width 指定盒子的宽度，height 指定盒子的高度

完整代码

import 'package:flutter/material.dart';

class SizeBoxExample extends StatefulWidget {
  @override
  _SizeBoxExampleState createState() => _SizeBoxExampleState();
}

class _SizeBoxExampleState extends State<SizeBoxExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SizeBoxExample"),
      ),
      body: Container(
        child: SizedBox(
          width: 200.0,
          height: 300.0,
          child: Card(child: Text('Hello World!')),
        )
      ),
    );
  }
}

SzieBox方法和说明

1、expand()

创建一个尽可能大的盒子

const SizedBox.expand({ Key? key, Widget? child })
  : width = double.infinity,
    height = double.infinity,
    super(key: key, child: child);

2、shrink()

创建一个空的盒子

const SizedBox.shrink({ Key? key, Widget? child })
  : width = 0.0,
    height = 0.0,
    super(key: key, child: child);

3、fromSize()

创建一个指定大小的盒子

SizedBox.fromSize({ Key? key, Widget? child, Size? size })
  : width = size?.width,
    height = size?.height,
    super(key: key, child: child);

FittedBox介绍

当子组件的内容超出父组件大小时，FittedBox 组件的作用是对子组件进行缩放和对齐方式的设置。

FittedBox属性和说明

字段	属性	描述
fit	BoxFit	子组件缩放位置调整
alignment	AlignmentGeometry	子组件对齐方式
clipBehavior	Clip	剪辑子组件内容的方式

FittedBox属性详细使用

1、fit

主要用于调整子组件缩放位置，关于位置的调整总共有7种，分别为fill contain cover fitWidth fitHeight none scaleDown，接下来我们说一下这七个属性分别代表什么效果。

1.1、fill

不等比例缩放，图片填充满整个控件

1.2、contain

等比例缩放，直到图片的高或者宽填充满控件

1.3、cover

等比例缩放，直到图片的宽和高都充满整个控件，图片可以超出控件的范围，但是会导致显示不完整。

1.4、fitWidth

等比例缩放，宽度充满

1.5、fitHeight

等比例缩放，高度充满

1.6、none

不等比例缩放，保留原始图片大小并居中显示

1.7、scaleDown

等比例缩放，两种缩放方式，第一种当图片大小大于控件时采用contain布局，第二种当图片宽高小于控件时采用none

2、alignment

alignment 主要是用于设置子组件的对齐方式，在Flutter深入浅出组件篇—Align、AnimatedAlign 可以看到更详细的介绍

3、clipBehavior

剪辑子组件内容，关于裁剪内容总共有4种，分别为none hardEdge antiAlias antiAliasWithSaveLayer，该属性主要配合贝塞尔曲线来使用，在后面的将绘图的时候在重点来讲，这里先简单概况一下4种属性的作用。

3.1、none

无模式裁剪，正常效果

3.2、hardEdge

不使用抗锯齿进行剪辑

3.3、antiAlias

使用抗锯齿进行剪辑

3.4、antiAliasWithSaveLayer

使用抗锯齿进行剪辑并在剪辑之后立即保存图层

总结

SizeBox 主要用于限制子控件的大小，比如需要设定按钮的宽度和高度。

FittedBox 主要用于对子控件的缩放、对齐方式、剪辑操作。