面试题：Flutter 中如何针对不同平台实现基础的导航设计差异

Question

在Flutter开发中，假设要适配iOS和Android平台的用户习惯进行导航设计差异处理，请描述实现底部导航栏在两个平台上不同样式（如颜色、图标风格等）的大致步骤，并且说明如何利用Flutter提供的平台相关API来进行判断和切换。

Answer 1

1. 判断平台：
   • 利用dart:io库中的Platform类来判断当前运行的平台。在Flutter中，导入dart:io库：

   import 'dart:io';
   

   • 通过Platform.isIOS和Platform.isAndroid属性判断当前平台，例如：

   if (Platform.isIOS) {
     // iOS平台相关处理
   } else if (Platform.isAndroid) {
     // Android平台相关处理
   }
   

2. 实现底部导航栏不同样式：
   • 颜色：
     • 定义两个不同平台的颜色变量。例如：

     Color iosNavBarColor = Colors.blue;
     Color androidNavBarColor = Colors.green;
     Color currentNavBarColor;
     if (Platform.isIOS) {
       currentNavBarColor = iosNavBarColor;
     } else if (Platform.isAndroid) {
       currentNavBarColor = androidNavBarColor;
     }
     

     • 在BottomNavigationBar中使用currentNavBarColor设置背景颜色，如：

     BottomNavigationBar(
       backgroundColor: currentNavBarColor,
       // 其他属性
     )
     

   • 图标风格：
     • 准备不同平台风格的图标，比如使用不同的图标集（如CupertinoIcons用于iOS，Icons用于Android）。

     IconData iosIcon = CupertinoIcons.home;
     IconData androidIcon = Icons.home;
     IconData currentIcon;
     if (Platform.isIOS) {
       currentIcon = iosIcon;
     } else if (Platform.isAndroid) {
       currentIcon = androidIcon;
     }
     

     • 在BottomNavigationBarItem中使用currentIcon设置图标，如：

     BottomNavigationBar(
       items: [
         BottomNavigationBarItem(
           icon: Icon(currentIcon),
           label: 'Home'
         )
       ]
     )
     

总体来说，就是先利用Platform类判断平台，然后根据不同平台设置底部导航栏的颜色、图标等样式属性。