面试题：Flutter中针对不同平台特性的自适应布局优化

Question

假设要开发一个跨平台（iOS、Android、Web）的Flutter应用，由于不同平台的交互习惯和屏幕特性存在差异，例如iOS和Android的系统导航栏高度不同，Web端可能存在多种屏幕分辨率及浏览器缩放情况。请阐述如何设计一套自适应布局方案，不仅能在不同屏幕尺寸下保持美观和易用性，还能针对各平台的特性进行优化。要求说明具体涉及到的布局技术、检测平台特性的方法以及相应的适配代码示例。

Answer 1

布局技术

1. Flex布局：Flutter 中的 Row、Column 和 Flex 组件基于 Flex 布局模型。可以通过 flex 属性分配空间，实现自适应布局。例如，在一个水平排列的 Row 中，可以让某些子组件根据可用空间按比例分配宽度：

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.blue,
      ),
    )
  ],
);

2. Stack布局：Stack 组件允许子组件堆叠在一起，可以通过 Positioned 组件来指定子组件的位置和大小，适用于需要层叠显示的场景。例如：

Stack(
  children: [
    Container(
      color: Colors.green,
    ),
    Positioned(
      top: 10,
      left: 10,
      child: Text('Overlay text'),
    )
  ],
);

3. MediaQuery：用于获取屏幕尺寸、像素密度等信息，根据这些信息进行布局调整。例如，可以根据屏幕宽度调整布局方式：

double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth < 600) {
  // 窄屏布局
  return Column(
    children: [
      // 子组件
    ],
  );
} else {
  // 宽屏布局
  return Row(
    children: [
      // 子组件
    ],
  );
}

检测平台特性的方法

1. dart:io 库：可以检测当前运行的平台是 iOS 还是 Android。

import 'dart:io';
if (Platform.isIOS) {
  // iOS 平台相关处理
} else if (Platform.isAndroid) {
  // Android 平台相关处理
}

2. 针对 Web 平台：Flutter Web 没有直接类似 dart:io 的平台检测方式，但可以通过 window.navigator.userAgent 获取用户代理字符串来判断浏览器等信息。不过，在 Flutter 中更常用的是使用 flutter_web_plugins 库中的 kIsWeb 常量来判断是否运行在 Web 平台：

import 'package:flutter_web_plugins/flutter_web_plugins.dart';
if (kIsWeb) {
  // Web 平台相关处理
}

适配代码示例

1. 系统导航栏高度适配：

import 'package:flutter/material.dart';
import 'dart:io';

class PlatformNavBarHeight extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double navBarHeight = 0;
    if (Platform.isIOS) {
      navBarHeight = kToolbarHeight + MediaQuery.of(context).padding.top;
    } else if (Platform.isAndroid) {
      navBarHeight = kToolbarHeight;
    }
    return Container(
      height: navBarHeight,
      color: Colors.blue,
    );
  }
}

2. Web 端屏幕分辨率及缩放适配：

import 'package:flutter/material.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

class WebResolutionAdaptation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (kIsWeb) {
      double screenWidth = MediaQuery.of(context).size.width;
      double fontSize = screenWidth < 600? 14 : 18;
      return Text(
        'Adaptive text',
        style: TextStyle(fontSize: fontSize),
      );
    } else {
      return Text('Not on web');
    }
  }
}