面试题：Flutter中如何在Material和Cupertino组件库间灵活切换

Question

假设你正在开发一个应用，需要根据用户系统设置或手动切换，在Material和Cupertino组件库之间灵活切换界面风格。请描述实现此功能的主要思路和关键代码片段。

Answer 1

主要思路

1. 状态管理：使用状态管理工具（如Flutter中的Provider、GetX等）来存储当前选择的界面风格（Material或Cupertino）。
2. 用户交互：提供用户界面元素（如设置页面中的开关），让用户能够手动切换风格。同时，检测系统设置变化以自动切换。
3. 条件渲染：根据存储的风格状态，在应用的顶级组件（如MaterialApp或CupertinoApp）进行条件渲染。

关键代码片段（以Flutter为例，使用Provider状态管理）

1. 定义状态管理类

import 'package:flutter/material.dart';

class ThemeModeProvider extends ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.system;

  ThemeMode get themeMode => _themeMode;

  void setThemeMode(ThemeMode mode) {
    _themeMode = mode;
    notifyListeners();
  }
}

2. 在应用入口使用状态管理并进行条件渲染

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ThemeModeProvider(),
      child: Consumer<ThemeModeProvider>(
        builder: (context, themeProvider, child) {
          return themeProvider.themeMode == ThemeMode.material
            ? MaterialApp(
                theme: ThemeData.light(),
                darkTheme: ThemeData.dark(),
                themeMode: ThemeMode.light,
                home: const HomePage(),
              )
            : CupertinoApp(
                theme: CupertinoThemeData(brightness: Brightness.light),
                darkTheme: CupertinoThemeData(brightness: Brightness.dark),
                home: const HomePage(),
              );
        },
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Theme Switch')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 这里可以添加手动切换主题的按钮等交互元素
          ],
        ),
      ),
    );
  }
}

3. 检测系统主题变化并更新状态

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

class ThemeModeProvider extends ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.system;

  ThemeMode get themeMode => _themeMode;

  void setThemeMode(ThemeMode mode) {
    _themeMode = mode;
    notifyListeners();
  }

  void updateThemeModeOnSystemChange(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final isDark = mediaQuery.platformBrightness == Brightness.dark;
    setThemeMode(isDark? ThemeMode.dark : ThemeMode.light);
  }
}

4. 在合适的地方调用系统主题变化检测函数

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

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addObserver(
      SystemThemeObserver(
        context: context,
      ),
    );
    return Scaffold(
      appBar: AppBar(title: const Text('Theme Switch')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 这里可以添加手动切换主题的按钮等交互元素
          ],
        ),
      ),
    );
  }
}

class SystemThemeObserver extends WidgetsBindingObserver {
  final BuildContext context;

  SystemThemeObserver({required this.context});

  @override
  void didChangePlatformBrightness() {
    Provider.of<ThemeModeProvider>(context, listen: false)
      .updateThemeModeOnSystemChange(context);
  }
}