面试题：Flutter中Row Widget与其他布局Widget的深度交互及自定义布局实现

Question

假设你需要在一个页面中实现这样的布局：Row与Column嵌套使用，且Row中的子Widget根据屏幕宽度自适应排列，同时要实现一个自定义的布局规则，使得某些子Widget在特定条件下占据额外的空间。请描述实现这个布局的整体思路，包括如何处理Row与Column的交互、如何检测屏幕宽度以及如何实现自定义布局规则，并用代码示例展示关键部分的实现。

Answer 1

整体思路

1. Row 与 Column 交互：
   • 将 Column 作为外层容器，Row 作为 Column 的子部件。这样可以先垂直排列不同的行，再在每行中水平排列子部件。
2. 检测屏幕宽度：
   • 使用 MediaQuery 类来获取屏幕的宽度信息。MediaQuery 提供了当前上下文的媒体查询数据，其中包括屏幕尺寸。
3. 实现自定义布局规则：
   • 根据获取到的屏幕宽度，结合特定条件（如某些子部件的优先级等），使用 LayoutBuilder 或自定义 RenderObjectWidget 来实现子部件在 Row 中占据额外空间的布局。

代码示例（以 Flutter 为例）

import 'package:flutter/material.dart';

class CustomLayoutWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            // 获取屏幕宽度
            double screenWidth = MediaQuery.of(context).size.width;
            return Row(
              children: [
                // 假设条件：当屏幕宽度大于 600 时，第一个子部件占据额外空间
                if (screenWidth > 600) Expanded(child: Container(color: Colors.red, height: 50)),
                Container(color: Colors.blue, width: 100, height: 50),
                Container(color: Colors.green, width: 100, height: 50),
              ],
            );
          },
        ),
        // 其他行布局类似
      ],
    );
  }
}

在上述代码中：

• 使用 Column 作为外层容器。
• 在 Row 中，通过 MediaQuery.of(context).size.width 获取屏幕宽度。
• 根据屏幕宽度大于 600 的条件，使用 Expanded 让第一个子部件占据额外空间。实际应用中，可以根据更复杂的自定义条件来决定子部件的布局。