Center 中的 widthFactor 与 heightFactor 属性flutter 的 center 组件大家

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 无效。

Center 中的 widthFactor 与 heightFactor 属性

应用场景

相关