面试题：Flutter中如何利用Row与Column实现复杂且自适应的布局

Question

假设有这样一个需求：在一个页面中有若干个卡片式Widget，这些卡片需要在不同屏幕尺寸下，既能以水平排列（Row）方式展示部分内容，又能在空间不足时自动切换为垂直排列（Column），同时要保证卡片之间的间距均匀且所有卡片的宽度和高度能自适应屏幕变化。请描述实现该需求的主要思路和关键代码逻辑。

Answer 1

主要思路

1. 响应式布局：利用Flutter等框架提供的响应式布局能力，检测屏幕尺寸变化。
2. 条件渲染：根据屏幕尺寸条件判断，选择Row或Column进行卡片的布局。
3. 间距设置：在Row和Column中都设置合适的间距属性，保证卡片间距均匀。
4. 尺寸自适应：通过设置卡片的宽度和高度为灵活值，使其能随屏幕变化自适应。

关键代码逻辑（以Flutter为例）

import 'package:flutter/material.dart';

class CardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 判断屏幕宽度，这里假设600为临界值
        if (constraints.maxWidth >= 600) {
          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              buildCard(context),
              buildCard(context),
              buildCard(context),
            ],
          );
        } else {
          return Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              buildCard(context),
              buildCard(context),
              buildCard(context),
            ],
          );
        }
      },
    );
  }

  Widget buildCard(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 200, // 可自行调整
      margin: EdgeInsets.all(10),
      color: Colors.blue,
    );
  }
}

在上述代码中，LayoutBuilder用于获取当前布局的约束信息，通过判断屏幕宽度来决定是使用Row还是Column进行布局。buildCard方法构建单个卡片，卡片的宽度设为double.infinity以自适应屏幕宽度，高度设置为固定值（可根据需求调整），卡片间通过EdgeInsets设置均匀间距。