面试题：Flutter中基于Row和Column实现复杂自适应布局

Question

假设要实现一个复杂的页面布局，在不同屏幕尺寸（手机、平板）下，部分区域需要根据屏幕宽度或高度动态调整Row和Column内子元素的排列方式及占比，且某些子元素在特定条件下需要隐藏或显示。请描述实现该布局的整体思路，并使用Flutter代码示例展示关键部分的实现。

Answer 1

实现思路

1. 响应式布局：使用 LayoutBuilder 组件来获取当前屏幕的尺寸信息，根据屏幕宽度或高度来决定不同的布局策略。
2. 动态调整排列方式：在 Row 和 Column 中，根据屏幕尺寸条件，改变 mainAxisAlignment 和 crossAxisAlignment 等属性，来调整子元素的排列方式。
3. 动态调整占比：利用 Flexible 或 Expanded 组件，根据条件动态设置 flex 属性，改变子元素的占比。
4. 隐藏或显示子元素：通过条件判断，使用 Visibility 组件或三元运算符来决定子元素是否显示。

Flutter 代码示例

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        // 根据屏幕宽度判断是否是手机屏幕
        bool isMobile = constraints.maxWidth < 600;

        return Scaffold(
          appBar: AppBar(
            title: Text('Responsive Layout'),
          ),
          body: isMobile
            ? Column(
                children: [
                  Flexible(
                    flex: 2,
                    child: Container(
                      color: Colors.blue,
                      child: Center(
                        child: Text('Flex 2 - Mobile'),
                      ),
                    ),
                  ),
                  Visibility(
                    visible: isMobile,
                    child: Flexible(
                      flex: 1,
                      child: Container(
                        color: Colors.green,
                        child: Center(
                          child: Text('Flex 1 - Mobile, Visible on Mobile'),
                        ),
                      ),
                    ),
                  ),
                  Flexible(
                    flex: 1,
                    child: Container(
                      color: Colors.red,
                      child: Center(
                        child: Text('Flex 1 - Mobile'),
                      ),
                    ),
                  ),
                ],
              )
            : Row(
                children: [
                  Flexible(
                    flex: 1,
                    child: Container(
                      color: Colors.blue,
                      child: Center(
                        child: Text('Flex 1 - Tablet'),
                      ),
                    ),
                  ),
                  Flexible(
                    flex: 2,
                    child: Container(
                      color: Colors.green,
                      child: Center(
                        child: Text('Flex 2 - Tablet'),
                      ),
                    ),
                  ),
                  Flexible(
                    flex: 1,
                    child: Container(
                      color: Colors.red,
                      child: Center(
                        child: Text('Flex 1 - Tablet'),
                      ),
                    ),
                  ),
                ],
              ),
        );
      },
    );
  }
}

在上述代码中，通过 LayoutBuilder 获取屏幕宽度信息，判断当前设备是手机还是平板（这里简单以 600px 宽度为界限）。根据判断结果，在手机上使用 Column 布局，平板上使用 Row 布局，并对 Flexible 的 flex 属性以及 Visibility 的 visible 属性进行动态调整，实现不同屏幕尺寸下子元素排列方式、占比以及显示隐藏的控制。