面试题：Flutter 响应式布局中关于 FractionallySizedBox 和 LayoutBuilder 的高级应用

Question

在一个复杂的 Flutter 页面布局中，需要根据父容器的尺寸动态分配子组件的大小，且子组件可能存在多种不同的比例分配需求。请详细阐述如何结合 FractionallySizedBox 和 LayoutBuilder 来高效实现这种复杂的响应式布局，并给出代码示例。

Answer 1

1. 结合 FractionallySizedBox 和 LayoutBuilder 实现原理：

   • LayoutBuilder 用于获取父容器的约束（constraints），这些约束包含了父容器的最大和最小宽度、高度等信息。通过 LayoutBuilder，我们可以在构建时根据父容器的尺寸来动态调整子组件的布局。
   • FractionallySizedBox 允许我们根据给定的比例来设置子组件的大小。例如，widthFactor 和 heightFactor 属性可以设置子组件相对于父容器宽度和高度的比例。

2. 代码示例：

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        // 根据父容器宽度动态分配子组件宽度
        double firstChildWidthFactor = constraints.maxWidth < 600? 0.5 : 0.3;
        double secondChildWidthFactor = constraints.maxWidth < 600? 0.5 : 0.7;

        return Column(
          children: <Widget>[
            FractionallySizedBox(
              widthFactor: firstChildWidthFactor,
              child: Container(
                color: Colors.blue,
                height: 100,
              ),
            ),
            FractionallySizedBox(
              widthFactor: secondChildWidthFactor,
              child: Container(
                color: Colors.green,
                height: 100,
              ),
            ),
          ],
        );
      },
    );
  }
}

在上述代码中：

• LayoutBuilder 获取父容器的 BoxConstraints。
• 根据父容器的最大宽度（constraints.maxWidth）动态决定 FractionallySizedBox 的 widthFactor。
• 两个 FractionallySizedBox 分别设置不同的 widthFactor 来实现子组件宽度的动态分配，高度则固定为 100。这样可以根据父容器尺寸变化，高效实现响应式布局。