面试题：Flutter中Cupertino组件库的样式定制

Question

假设你需要在一个使用Cupertino组件库构建的iOS风格应用中，对CupertinoNavigationBar的颜色进行自定义修改，同时保持iOS原生风格的交互逻辑，你会如何实现？

Answer 1

1. 在 CupertinoApp 中设置主题：
   • 在Flutter中，要修改 CupertinoNavigationBar 的颜色，可通过 CupertinoThemeData 来设置。在应用的顶层 CupertinoApp 中，通过 theme 属性来配置 CupertinoThemeData。

   CupertinoApp(
     theme: CupertinoThemeData(
       primaryColor: Colors.blue, // 此处可自定义导航栏颜色，比如设置为蓝色
     ),
     home: MyHomePage(),
   );
   

2. 使用 CupertinoNavigationBar：
   • 在页面中使用 CupertinoNavigationBar 时，它会遵循 CupertinoApp 中设置的主题颜色。

   class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return CupertinoPageScaffold(
         navigationBar: CupertinoNavigationBar(
           middle: Text('页面标题'),
         ),
         child: Center(
           child: Text('内容'),
         ),
       );
     }
   }
   

   • 这样设置后，CupertinoNavigationBar 的颜色会根据 CupertinoThemeData 中的 primaryColor 进行自定义，同时保留iOS原生风格的交互逻辑，因为 CupertinoNavigationBar 本身就遵循iOS原生交互规范。