面试题：Flutter中如何使用MediaQuery实现简单的自适应布局

Question

请阐述在Flutter中，如何借助MediaQuery获取设备屏幕尺寸信息，并利用这些信息来实现一个简单的自适应布局，比如在不同屏幕宽度下，将一个文本组件和一个按钮组件的排列方式从水平排列切换为垂直排列。请给出核心代码示例。

Answer 1

1. 获取设备屏幕尺寸信息： 在Flutter中，可以通过MediaQuery来获取设备屏幕尺寸信息。MediaQuery提供了一系列与设备屏幕相关的属性，其中size属性用于获取屏幕的尺寸。

Size size = MediaQuery.of(context).size;
double screenWidth = size.width;
double screenHeight = size.height;

2. 实现自适应布局： 要根据屏幕宽度切换文本组件和按钮组件的排列方式，可以使用LayoutBuilder或直接在构建方法中根据屏幕宽度判断。以下是使用LayoutBuilder的示例：

import 'package:flutter/material.dart';

class AdaptiveLayoutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptive Layout'),
      ),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > 600) {
            // 屏幕宽度大于600时，水平排列
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('This is a text'),
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Button'),
                ),
              ],
            );
          } else {
            // 屏幕宽度小于等于600时，垂直排列
            return Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('This is a text'),
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Button'),
                ),
              ],
            );
          }
        },
      ),
    );
  }
}

在上述代码中：

• LayoutBuilder的builder回调函数接收BoxConstraints对象，通过constraints.maxWidth获取当前可用空间的最大宽度。
• 根据宽度判断条件，分别返回水平排列的Row和垂直排列的Column，从而实现自适应布局。