面试题：Flutter中针对iOS和Android平台的导航栏适配优化

Question

在Flutter应用开发中，iOS和Android平台的导航栏样式和交互习惯有所不同。请描述如何在Flutter中对导航栏进行适配，以符合两个平台各自的设计规范，同时提升用户体验，需举例说明涉及到的关键代码和组件。

Answer 1

1. 使用 CupertinoPageScaffold 和 Scaffold

• Scaffold 用于Android：
  • Scaffold 是Flutter中构建Android风格页面的主要组件。它包含一个 AppBar 用于显示导航栏。
  • 关键代码示例：

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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Android Style AppBar'),
      ),
      body: Center(
        child: Text('Content'),
      ),
    );
  }
}

• CupertinoPageScaffold 用于iOS：
  • CupertinoPageScaffold 是构建iOS风格页面的组件，它包含一个 CupertinoNavigationBar 作为导航栏。
  • 关键代码示例：

import 'package:flutter/cupertino.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('iOS Style NavBar'),
      ),
      child: Center(
        child: Text('Content'),
      ),
    );
  }
}

2. 平台自适应

• 使用 Theme.of(context).platform：
  • 可以通过判断当前设备的平台来决定使用哪种导航栏。
  • 关键代码示例：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
    return isIOS
      ? CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text('iOS Style NavBar'),
          ),
          child: Center(
            child: Text('Content'),
          ),
        )
      : Scaffold(
          appBar: AppBar(
            title: Text('Android Style AppBar'),
          ),
          body: Center(
            child: Text('Content'),
          ),
        );
  }
}

• 功能适配：
  • 返回按钮：在iOS上，CupertinoNavigationBar 通常会在左上角显示返回按钮，并且点击会默认返回上一页。在Android中，AppBar 可以通过设置 leading 属性添加返回按钮，例如 appBar: AppBar(leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () => Navigator.pop(context))。
  • 颜色和样式：iOS的 CupertinoNavigationBar 通常有一个与页面内容区分开的背景色，且文字样式较为简洁。Android的 AppBar 可以有更丰富的颜色和样式定制，如通过 AppBar 的 backgroundColor、foregroundColor 等属性进行设置。

通过以上方法，可以使Flutter应用的导航栏在iOS和Android平台上符合各自的设计规范，提升用户体验。