面试题：Flutter中iOS与Android布局差异之盒模型差异

主要差异

默认边距和填充：
- 在iOS上，一些组件默认有较小的边距或填充。例如，Text组件在iOS上默认的内边距可能比Android上略小。
- Android某些组件默认边距和填充规则可能与iOS不同，导致同样的布局代码在两个平台显示略有差异。
字体渲染：
- iOS和Android使用不同的字体渲染引擎。这会导致即使设置相同的字体大小和样式，在两个平台上的实际显示效果可能不同，从而影响盒模型布局中文字相关部分的尺寸。
系统默认主题样式：
- iOS和Android有不同的系统默认主题样式。例如，按钮的默认样式在两个平台差异较大，这会影响到按钮盒模型的外观和尺寸（如按钮的高度、边框样式等）。

代码适配示例

使用Platform类判断平台：

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

class PlatformAwareWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: Platform.isIOS? EdgeInsets.all(10) : EdgeInsets.all(15),
      child: Text('适配平台的盒模型'),
    );
  }
}

在上述代码中，通过Platform.isIOS判断当前运行平台。如果是iOS平台，Container的内边距设置为10像素；如果是Android平台，内边距设置为15像素，以此来适配不同平台默认内边距的差异。

使用Theme来统一样式：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 16),
        ),
        buttonTheme: ButtonThemeData(
          height: 40,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5),
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('统一主题样式适配'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('统一字体样式'),
              ElevatedButton(
                onPressed: () {},
                child: Text('统一按钮样式'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这里通过定义统一的ThemeData，设置文本样式和按钮样式等，在iOS和Android平台上使用相同的主题样式，减少因系统默认主题样式差异造成的盒模型布局不一致。通过这种方式，可以保证Text组件和ElevatedButton等组件在两个平台上具有相似的外观和布局尺寸。

星途面试题库

面试题：Flutter中iOS与Android布局差异之盒模型差异

知识考点

面试题答案

主要差异

代码适配示例