flutter 的 center 组件大家都不陌生，有居中 child 的作用，但其中 的widthFactor 和 heightFactor 可能鲜有人用。下面我们一起来看下 这两个属性的作用。
没有加 heightFactor 的时候 center 的高度是尽量高，可以充满屏幕。
把下面的代码 copy 到 main.dart 执行查看效果
import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Center( child: Container( color: Colors.blue, child: Center( child: Container( width: 100, height: 100, color: Colors.green, ), ))); } } 复制代码
增加了 heightFactor: 2 后，里面的center的高度变为 200。
@override Widget build(BuildContext context) { return Center( //1 child: Container( //2 color: Colors.blue, child: Center( //3 //增加 heightFactor: 2, child: Container( //4 width: 100, height: 100, color: Colors.green, ), ))); } 复制代码
widthFactor 效果也是一样的。
center widget 的特性： 如果没有 heightFactor与widthFactor的话，会尽量大。 上面的代码完整解释 一下
- 屏幕告诉 center ，你可以尽量大。于是center 充满屏幕
- center 告诉 container 你可以 小到0 也可以大到整个屏幕。 container 想，我自己没有定宽度，所以我要和我的孩子一样大。
- container 告诉 center ，你可以 大到充满屏幕。center 如果没有 heightFactor 就和屏幕一样高了。如果有 heightFactor,就只能是 孩子 高度的 2 倍。
- center 告诉 container 你可以任意大小，只要别超过屏幕。于是 Container 显示 100 * 100
绿色container的高度定下来后，center 的高度也定下来了 ，是 200, 于是蓝色 contaier的高度也定下来了 也是 200.
应用场景
那么，这两个属性有什么应用场景呢？
widthFactor 就直接的效果就把 center 定高宽，相当于 在 center 外加了一个 SizedBox。
下面的两段代码是等效的 ,明显第一段更简洁，少了一层。
Center( heightFactor: 2, child: Container( width: 100, height: 100, color: Colors.green, ), ))); 复制代码
SizedBox( height: 200, child: Center( heightFactor: 2, child: Container( width: 100, height: 100, color: Colors.green, ), )))); 复制代码
有明确高宽需求的场景，都是 widthFactor 与 heightFactor应用场景。
最后补充一下，如果 Center受到父 widget 的 tight 约束 widthFactor 与 heightFactor 无效。
相关
- Align 也有 widthFactor 与 heightFactor 属性效果和 Center 一样，Center 继承自 Align。
- FractionallySizedBox widthFactor 与 heightFactor 属性效果和 Center 一样
