面试题：Flutter中处理iOS和Android输入法差异之基础布局适配

Question

在Flutter应用中，iOS和Android系统下输入法弹出时可能导致页面布局错乱。请描述一种通用的处理方式，确保页面在两个平台上输入法弹出时都能合理显示，例如在TextField输入框位于页面底部的场景下，并给出关键代码示例。

Answer 1

通用处理方式

1. 使用 SingleChildScrollView：将页面主体内容包裹在 SingleChildScrollView 组件内，这样当输入法弹出时，页面可滚动以适应空间变化。
2. Scaffold 的 resizeToAvoidBottomInset 属性：将 Scaffold 的 resizeToAvoidBottomInset 属性设置为 true（默认值），这会使页面在输入法弹出时自动调整大小，避免被输入法遮挡。

关键代码示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('输入法处理示例'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            // 其他页面内容
            SizedBox(height: 200),
            TextField(
              decoration: InputDecoration(
                labelText: '输入内容',
              ),
            ),
          ],
        ),
      ),
    );
  }
}