Flutter 百分比布局

Flutter 百分比布局（FractionallySizedBox），FractionallySizedBox组件会根据现有空间来调整child的尺寸，所以即使为child设置了具体的尺寸数值，也不起作用。当需要在一个区域中取百分比尺寸时，可以使用这个组件，比如需要一个高度30%、宽度60%的区域。

FractionallySizedBox的布局主要跟它的宽高因子（两个参数）有关，当参数为null或者有具体数值的时候，布局表现不一样。当然，还有一个辅助参数alignment，作为对齐方式进行布局。具体有以下两种情况：

• 设置了具体的宽高因子，具体的宽高则根据现有空间宽高×因子，当宽高因子大于1的时候，有可能会超出父组件的范围。
• 如果没有设置宽高因子，则填满可用区域。

FractionallySizedBox组件的主要属性如下所示：

注意 如果宽高因子不为null，那么实际的最大宽高度则为child的宽高乘以这个因子；如果因子为null，那么child的宽高则会尽量充满整个区域。

接下来我们写一个小示例，示例中有两个容器，底部的容器宽高各为200。如果上面的容器宽度因子为0.5，则它的实际宽度为100；如果高度因子为1.5，则它的实际高度为300。对齐方式为左上角对齐。所以上层的元素横向仍在容器内部，纵向已经超出容器了。完整的示例代码如下：

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FractionallySizedBox百分比布局示例'),
      ),
      body: Container(
        color: Colors.blueGrey,
        height: 200.0,
        width: 200.0,
        child: FractionallySizedBox(
          alignment: Alignment.topLeft,         //元素左上角对齐
          widthFactor: 0.5,                        //宽度因子
          heightFactor: 1.5,                       //高度因子
          child: Container(
              color: Colors.green,
          ),
        ),
      ),
    );
  }
}
void main() {
  runApp(
    MaterialApp(
      title: 'FractionallySizedBox百分比布局示例',
      home: LayoutDemo(),
    ),
  );
}

上述示例代码的视图展现大致如图所示：

酷客教程相关文章：

• Flutter 调整宽高比
• Flutter 限定最大宽高布局
• Flutter 限定最大最小宽高布局
• Flutter 设置具体尺寸