面试题：Flutter中SharedPreferences与状态管理在复杂多页面交互场景的优化

架构设计

数据层：

使用SharedPreferences来持久化存储用户默认筛选条件等数据。例如，创建一个SharedPreferencesUtil类来封装对SharedPreferences的操作，如读取和写入筛选条件。

class SharedPreferencesUtil {
  static const String defaultFilterKey = 'default_filter';
  static Future<void> saveDefaultFilter(String filter) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(defaultFilterKey, filter);
  }
  static Future<String?> getDefaultFilter() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString(defaultFilterKey);
  }
}

状态管理层：

选择MobX作为状态管理框架。创建一个Store类，例如FilterStore，用于管理商品筛选条件的状态。

import 'package:mobx/mobx.dart';

part 'filter_store.g.dart';

class FilterStore = _FilterStore with _$FilterStore;

abstract class _FilterStore with Store {
  @observable
  String? filter;

  _FilterStore() {
    _loadFilter();
  }

  @action
  void setFilter(String newFilter) {
    filter = newFilter;
    SharedPreferencesUtil.saveDefaultFilter(newFilter);
  }

  Future<void> _loadFilter() async {
    final savedFilter = await SharedPreferencesUtil.getDefaultFilter();
    filter = savedFilter;
  }
}

视图层：

在各个商品展示页面，通过Observer组件（来自MobX）来监听Store中筛选条件的变化，并根据筛选条件更新UI。例如：

import 'package:flutter/material.dart';
import 'package:mobx/observer.dart';
import 'filter_store.dart';

class ProductPage extends StatelessWidget {
  final FilterStore filterStore;
  ProductPage({required this.filterStore});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Product Page'),
      ),
      body: Observer(
        builder: (_) {
          return Text('Filter: ${filterStore.filter?? 'No filter'}'');
        },
      ),
    );
  }
}

数据流向

初始化：
- 应用启动时，FilterStore调用_loadFilter方法，从SharedPreferences中读取用户默认筛选条件并更新filter状态。
用户操作：
- 用户在某个商品展示页面更改筛选条件，调用FilterStore的setFilter方法，该方法更新filter状态，同时将新的筛选条件保存到SharedPreferences中。
页面间同步：
- 其他商品展示页面通过Observer组件监听FilterStore中filter状态的变化，当状态改变时，自动更新UI，实现数据在不同页面间的同步。

处理潜在性能问题

减少不必要的重建：
- 在Observer组件中，只在依赖的observable数据（如filter）变化时才重建相关UI部分，避免整个页面的不必要重建。
批量更新：
- 如果有多个状态变化相关操作，可以将它们合并为一个action，这样MobX只会触发一次UI更新，而不是多次。例如，如果筛选条件涉及多个属性的变化，可以在一个action中统一更新这些属性。
优化SharedPreferences操作：
- 由于SharedPreferences的读写操作是异步的，尽量在应用启动或合适的时机一次性读取需要的数据，而不是在频繁的用户操作中读取。对于写入操作，合并多次写入请求，减少I/O操作次数。例如，可以使用一个队列暂存写入请求，在合适的时机批量写入SharedPreferences。

星途面试题库

面试题：Flutter中SharedPreferences与状态管理在复杂多页面交互场景的优化

知识考点

面试题答案

架构设计

数据流向

处理潜在性能问题