【布局 widget】 Flutter FractionallySizedBox-阿里云开发者社区

【布局 widget】 Flutter FractionallySizedBox

2022-12-27 94

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【布局 widget】 Flutter FractionallySizedBox

大家好，我是17。

FractionallySizedBox 是布局 widget，可以给 child tight 约束，多用于按比例填充空白。

BoxConstraints _getInnerConstraints(BoxConstraints constraints) {
    double minWidth = constraints.minWidth;
    double maxWidth = constraints.maxWidth;
    if (_widthFactor != null) {
      final double width = maxWidth * _widthFactor!;
      minWidth = width;
      maxWidth = width;
    }
    double minHeight = constraints.minHeight;
    double maxHeight = constraints.maxHeight;
    if (_heightFactor != null) {
      final double height = maxHeight * _heightFactor!;
      minHeight = height;
      maxHeight = height;
    }
    return BoxConstraints(
      minWidth: minWidth,
      maxWidth: maxWidth,
      minHeight: minHeight,
      maxHeight: maxHeight,
    );
  }
复制代码

void performLayout() {
    if (child != null) {
      child!.layout(_getInnerConstraints(constraints), parentUsesSize: true);
      size = constraints.constrain(child!.size);
      alignChild();
    } else {
      size = constraints.constrain(_getInnerConstraints(constraints).constrain(Size.zero));
    }
  }
复制代码

上面两段代码就是 FractionallySizedBox 的布局逻辑。我们从三个方面来描述一下。

确定 child 的 constrains
确定自己的大小
摆放 child。

确定 child constrains

constrains 是 tight ，FractionallySizedBox 透传 constrains 给 child。

constrains 是 loose，widthFactor 为空，FractionallySizedBox 透传 minWidth，maxWith 给 child；heightFactor 为空，FractionallySizedBox 透传 minHeight，maxHeight 给 child。

constrains 是 loose，widthFactor 不为空，在 constrains 范围内给 child 的 width tight 约束；heightFactor 不为空在 constrains 范围内给 child 的 height tight 约束。

举个例子：

ConstrainedBox(
    constraints: const BoxConstraints(
        minWidth: 0,
        maxWidth: 100,
        minHeight: 0,
        maxHeight: 100),
    child: FractionallySizedBox(
      widthFactor: 0.5,
      child: Container(
        color: Colors.green[400],
      ),
));
复制代码

widthFactor 不为空，child 的宽受到 tight 约束，值为 100 * 0.5 等于 50。

heightFactor 为空，FractionallySizedBox 将约束透传给 child。Container 在没有 child 的情况下会尽量大，所以高度为 100。

widthFactor 和 heightFactor 必须大于 0，可以大于 1 ，所以 child 的大小可以超出 parent

确定自己的大小

简单来说，FractionallySizedBox 的大小不会超过 constrains 的范围。在这个前提下，FractionallySizedBox 尽量和 child 一样大。如果没有 child 尽量取 widthFactor，heightFactor 设定的值。

摆放 child

通过 alignment 参数摆放 child。只有 FractionallySizedBox 与 child 不一样大的时候才会有效果。

应用场景

按比例填充空白

Container(
  width: 100,
  height: 100,
  child: FractionallySizedBox(
    widthFactor: 0.8,
    heightFactor: 0.8,
    decoration: BoxDecoration(border: Border.all(color: Colors.blue,width: 2)),
    child: Container(
      color: Colors.green[400],
    ),
  ))
复制代码