关于flutter:Flutter深入浅出组件篇SizeBoxFittedBox

SizeBox 介绍

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

示例代码

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

什么状况下应用 SizeBox?

咱们晓得按钮是不能设定宽度和高度的，如果咱们须要自定按钮的宽度和高度，那么就能够用SizeBox 来进行限度。

SizeBox 属性和阐明

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 属性和阐明

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 次要用于对子控件的缩放、对齐形式、剪辑操作。