面试题：Flutter中如何针对不同屏幕尺寸进行基础的UI适配

Question

在Flutter开发中，阐述一下如何利用系统提供的工具或方法来对不同屏幕尺寸（如手机、平板）进行基本的UI适配，以保证UI元素在各种设备上都能合理展示。请举例说明常用的布局组件及相关属性设置。

Answer 1

1. 使用 MediaQuery

MediaQuery 是 Flutter 中获取设备屏幕信息的重要工具，通过它可以获取屏幕尺寸、像素密度等。例如：

import 'package:flutter/material.dart';

class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive UI'),
      ),
      body: Center(
        child: Text('Width: ${size.width}, Height: ${size.height}'),
      ),
    );
  }
}

2. 使用 LayoutBuilder

LayoutBuilder 可以让我们根据父组件的约束来构建 UI。例如，根据可用宽度来决定是显示一列还是两列内容：

class LayoutBuilderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth > 600) {
          return Row(
            children: [
              Expanded(child: Container(color: Colors.blue, height: 200)),
              Expanded(child: Container(color: Colors.green, height: 200)),
            ],
          );
        } else {
          return Column(
            children: [
              Container(color: Colors.blue, height: 200),
              Container(color: Colors.green, height: 200),
            ],
          );
        }
      },
    );
  }
}

3. 常用布局组件及属性设置

• Row 和 Column
  • mainAxisAlignment：用于控制主轴方向上的对齐方式，如 MainAxisAlignment.start（起始位置对齐）、MainAxisAlignment.center（居中对齐）、MainAxisAlignment.end（结束位置对齐）等。
  • crossAxisAlignment：用于控制交叉轴方向上的对齐方式，如 CrossAxisAlignment.start、CrossAxisAlignment.center 等。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(color: Colors.red, width: 100, height: 100),
    Container(color: Colors.blue, width: 100, height: 100),
  ],
)

• Expanded：用于按比例分配剩余空间。在 Row 或 Column 中，将子组件包裹在 Expanded 中可以让其占据剩余空间。

Row(
  children: [
    Expanded(child: Container(color: Colors.yellow)),
    Container(width: 100, color: Colors.purple),
  ],
)

• Flexible：与 Expanded 类似，但 Flexible 可以设置 flex 属性，并且不会强制子组件填满剩余空间，可根据自身大小调整。

Row(
  children: [
    Flexible(flex: 2, child: Container(color: Colors.orange)),
    Flexible(flex: 1, child: Container(color: Colors.brown)),
  ],
)

• AspectRatio：用于设置子组件的宽高比。

AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(color: Colors.cyan),
)

通过上述方法和组件，可以有效进行不同屏幕尺寸的 UI 适配。