面试题：Flutter 中如何使用布局组件实现基本的响应式布局以适应不同屏幕尺寸

Question

假设要开发一个简单页面，在大屏幕上显示三列内容，在小屏幕上显示一列内容。请用 Flutter 代码示例说明如何通过布局组件（如 Row、Column、Flex 等）和媒体查询（MediaQuery）来实现这种响应式布局。

Answer 1

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Layout'),
      ),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth >= 600) {
            // 大屏幕（例如桌面端），显示三列
            return Row(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.red,
                    child: Center(child: Text('Column 1')),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.green,
                    child: Center(child: Text('Column 2')),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.blue,
                    child: Center(child: Text('Column 3')),
                  ),
                ),
              ],
            );
          } else {
            // 小屏幕（例如手机端），显示一列
            return Column(
              children: [
                Container(
                  color: Colors.red,
                  child: Center(child: Text('Column 1')),
                ),
                Container(
                  color: Colors.green,
                  child: Center(child: Text('Column 2')),
                ),
                Container(
                  color: Colors.blue,
                  child: Center(child: Text('Column 3')),
                ),
              ],
            );
          }
        },
      ),
    );
  }
}

你可以在 main 函数中使用这个 ResponsiveLayout 来展示该布局：

void main() {
  runApp(MaterialApp(
    home: ResponsiveLayout(),
  ));
}

上述代码中，LayoutBuilder 会根据屏幕宽度来动态决定展示的布局。如果屏幕宽度大于等于 600，则展示三列的 Row 布局；否则展示一列的 Column 布局。每个列使用 Container 来模拟，并设置不同颜色以便区分。

还可以使用 MediaQuery 实现同样功能：

import 'package:flutter/material.dart';

class ResponsiveLayoutWithMediaQuery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Layout with MediaQuery'),
      ),
      body: width >= 600
         ? Row(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.red,
                    child: Center(child: Text('Column 1')),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.green,
                    child: Center(child: Text('Column 2')),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.blue,
                    child: Center(child: Text('Column 3')),
                  ),
                ),
              ],
            )
          : Column(
              children: [
                Container(
                  color: Colors.red,
                  child: Center(child: Text('Column 1')),
                ),
                Container(
                  color: Colors.green,
                  child: Center(child: Text('Column 2')),
                ),
                Container(
                  color: Colors.blue,
                  child: Center(child: Text('Column 3')),
                ),
              ],
            ),
    );
  }
}

在 main 函数中使用：

void main() {
  runApp(MaterialApp(
    home: ResponsiveLayoutWithMediaQuery(),
  ));
}

这里通过 MediaQuery.of(context).size.width 获取屏幕宽度，根据宽度决定展示哪种布局。