1. 这个功能解决什么问题

地图设置让用户自定义地图展示偏好，核心价值体现在以下维度：

• 个性化展示：用户可按需控制风险图层、井盖编号标注的显示/隐藏，贴合不同使用场景（如巡检时需标注、数据分析时需风险图层）；
• 数据持久化：设置项通过本地存储留存，应用重启后无需重复配置，提升使用效率；
• 即时反馈：开关切换后立即生效并展示预览，用户可直观确认设置效果；
• 工程实践：是SharedPreferences（本地存储）+SwitchListTile（交互组件）的典型落地场景，可复用至其他设置类页面。

2. 相关文件一览

• lib/feature_pages.dart：核心页面文件，包含MapSettingsPage类，承载所有设置UI和逻辑；
• package:shared_preferences/shared_preferences.dart：Flutter官方本地存储插件，轻量且适配多平台，适合存储简单的布尔型、数值型设置项。

3. 状态定义

在MapSettingsPage的状态类中，首先定义核心状态变量，满足基础的状态管理需求：

class _MapSettingsPageState extends State<MapSettingsPage> {
  bool _showRisk = true; // 控制风险图层显示
  bool _showLabels = true; // 控制编号标注显示
  bool _loading = true; // 加载状态标识
}

状态变量设计要点：

• 初始值：_showRisk和_showLabels默认设为true，符合大多数用户首次使用时需查看完整信息的需求；
• 加载状态：_loading用于区分“数据未加载完成”和“设置项展示”状态，避免页面加载时出现空白或错误。

4. 初始化加载

页面初始化时触发数据加载，保证打开页面就能读取本地存储的设置：

@override
void initState() {
  super.initState();
  _load(); // 异步加载持久化数据
}

初始化逻辑设计思路：

• 时机选择：initState是StatefulWidget创建时的生命周期方法，在此调用加载方法，确保页面渲染前先获取数据；
• 异步处理：_load为异步方法，避免阻塞UI线程，防止页面卡顿。

5. 加载逻辑

_load方法是读取本地存储的核心，实现“读取-赋值-结束加载”的完整流程：

Future<void> _load() async {
  final sp = await SharedPreferences.getInstance();
  setState(() {
    _showRisk = sp.getBool('map_show_risk') ?? true;
    _showLabels = sp.getBool('map_show_labels') ?? true;
    _loading = false;
  });
}

加载逻辑关键细节：

• 实例获取：SharedPreferences.getInstance()是异步方法，需用await确保拿到存储实例；
• 空值处理：使用??设置默认值，避免本地无数据时出现null，保证页面状态稳定；
• 状态更新：通过setState刷新UI，结束加载状态并展示读取后的设置值。

6. 保存逻辑

_save方法负责将当前开关状态写入本地存储，实现设置持久化：

Future<void> _save() async {
  final sp = await SharedPreferences.getInstance();
  await sp.setBool('map_show_risk', _showRisk);
  await sp.setBool('map_show_labels', _showLabels);
}

保存逻辑注意事项：

• 键名统一：存储键名（如map_show_risk）需与读取时一致，否则会出现“存得进、读不出”的问题；
• 异步等待：setBool是异步操作，用await确保存储完成后再执行后续逻辑，避免数据写入不完整；
• 轻量存储：仅存储必要的布尔值，符合SharedPreferences适合存储简单数据的特性。

7. 开关 UI

使用SwitchListTile实现开关交互，兼顾美观与易用性：

SwitchListTile(
  value: _showRisk,
  onChanged: (v) async {
    setState(() => _showRisk = v);
    await _save();
  },
  title: const Text('显示风险图层'),
),

开关组件设计亮点：

• 交互流程：先通过setState更新UI状态，再调用_save持久化，保证用户看到的状态与存储状态一致；
• 组件特性：SwitchListTile内置了开关+文字的组合样式，无需手动布局，符合Material Design规范；
• 即时反馈：开关切换瞬间UI更新，用户可立即感知操作结果。

补充第二个开关的核心实现，保持交互逻辑统一：

SwitchListTile(
  value: _showLabels,
  onChanged: (v) async {
    setState(() => _showLabels = v);
    await _save();
  },
  title: const Text('显示编号标注'),
),

两个开关的设计一致性：

• 复用相同的“更新状态+保存数据”逻辑，降低维护成本；
• 标题文字简洁明确，用户可快速理解开关对应的功能。

8. 预览信息

在页面底部添加预览区域，让用户直观确认当前设置：

ListTile(
  title: const Text('当前预览(示例)'),
  subtitle: Text(
    '风险图层: ${_showRisk ? '开' : '关'}，标注: ${_showLabels ? '开' : '关'}'
  ),
)

预览区域的价值：

• 状态可视化：将布尔值转换为“开/关”的中文描述，降低理解成本；
• 位置设计：放在开关下方，用户操作后可直接查看结果，提升交互闭环；
• 组件选择：ListTile保持与开关组件的视觉统一，页面风格更协调。

9. 完整页面代码（核心片段拆解）

第一步：页面结构定义

先完成页面的基础结构，保证组件的可复用性：

class MapSettingsPage extends StatefulWidget {
  const MapSettingsPage({super.key});

  @override
  State<MapSettingsPage> createState() => _MapSettingsPageState();
}

页面类设计要点：

• 无状态参数：当前页面无需接收外部参数，故构造函数仅保留super.key；
• 状态分离：遵循Flutter“状态与视图分离”原则，将可变状态放在_MapSettingsPageState中。

第二步：构建页面UI

核心UI逻辑，区分加载状态和正常展示状态：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('地图设置')),
    body: _loading ? const Center(child: CircularProgressIndicator()) : ListView(
      children: [/* 开关和预览组件 */],
    ),
  );
}

UI构建的核心思路：

• 加载状态：展示CircularProgressIndicator，告知用户“数据正在加载”，避免感知上的卡顿；
• 布局选择：使用ListView承载开关组件，适配不同屏幕高度，防止内容溢出；
• 导航栏：AppBar设置明确的标题，符合移动端页面的导航习惯。

10. 地图设置数据模型

为适配更多设置项，定义结构化的数据模型，提升扩展性：

class MapSettings {
  final bool showRiskLayer; // 风险图层
  final bool showLabels; // 编号标注
  final bool showGrid; // 网格显示
  // 其他字段默认值配置
  const MapSettings({
    this.showRiskLayer = true,
    this.showLabels = true,
    this.showGrid = false,
  });
}

数据模型设计优势：

• 结构化管理：将分散的设置项整合为类，便于统一维护和传递；
• 默认值：每个字段设置合理默认值，首次使用时无需手动初始化；
• 扩展性：新增设置项（如网格、指南针）时，仅需在类中添加字段，不影响原有逻辑。

定义地图类型枚举，规范地图显示模式的取值：

enum MapType {
  normal, // 标准地图
  satellite, // 卫星地图
  hybrid, // 混合地图
  terrain, // 地形地图
}

枚举的价值：

• 类型安全：避免使用字符串/数字传递地图类型时出现错误值；
• 语义清晰：每个枚举值对应明确的地图类型，代码可读性更高。

11. 设置状态管理

使用Provider封装设置的加载和更新逻辑，解耦UI与数据：

class MapSettingsProvider extends ChangeNotifier {
  MapSettings _settings = const MapSettings();
  bool _loading = false;
  String? _error; // 错误信息存储
}

状态管理类的核心设计：

• 私有状态：_settings等变量私有化，避免外部直接修改，保证数据安全；
• 状态拓展：新增_error字段，用于捕获存储操作中的异常，提升容错性；
• 通知机制：继承ChangeNotifier，状态变化时通知UI刷新。

实现设置加载方法，包含异常处理和状态通知：

Future<void> loadSettings() async {
  _loading = true;
  _error = null;
  notifyListeners(); // 通知UI进入加载状态
  try {
    final sp = await SharedPreferences.getInstance();
    // 读取并赋值逻辑（简化版）
    _settings = MapSettings(
      showRiskLayer: sp.getBool('show_risk_layer') ?? true,
    );
  } catch (e) {
    _error = e.toString(); // 捕获异常并存储
  }
}

加载方法的健壮性设计：

• 前置操作：加载前重置loading和error状态，避免残留状态影响；
• 异常捕获：try-catch包裹存储操作，防止崩溃并记录错误信息；
• 通知时机：加载开始和结束时都调用notifyListeners，保证UI同步更新。

实现单个设置项的更新方法，统一处理不同类型的设置：

Future<void> updateSetting(String key, dynamic value) async {
  try {
    final sp = await SharedPreferences.getInstance();
    switch (key) {
      case 'show_risk_layer':
        _settings = _settings.copyWith(showRiskLayer: value);
        await sp.setBool(key, value);
        break;
    }
    notifyListeners();
  } catch (e) {
    _error = e.toString();
  }
}

更新方法的设计思路：

• 统一入口：通过key区分不同设置项，无需为每个设置写单独的更新方法；
• 不可变更新：使用copyWith创建新的MapSettings实例，符合不可变数据原则；
• 异常处理：捕获存储异常，保证单个设置更新失败不影响整体功能。

添加重置默认设置的方法，提升用户操作灵活性：

Future<void> resetToDefaults() async {
  try {
    final sp = await SharedPreferences.getInstance();
    await sp.clear(); // 清空所有设置
    _settings = const MapSettings(); // 恢复默认值
    notifyListeners();
  } catch (e) {
    _error = e.toString();
  }
}

重置方法的核心逻辑：

• 清空存储：调用sp.clear()删除所有本地设置数据；
• 恢复默认：重新赋值为MapSettings默认实例，保证与初始状态一致；
• 反馈机制：状态更新后通知UI，用户可立即看到重置效果。

12. 高级地图设置组件

构建分区域的高级设置UI，提升用户体验：

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

  @override
  Widget build(BuildContext context) {
    return Consumer<MapSettingsProvider>(
      builder: (context, provider, child) {
        return ListView(padding: const EdgeInsets.all(16),
          children: [/* 分区域组件 */],
        );
      },
    );
  }
}

高级组件的设计亮点：

• 状态消费：使用Consumer监听MapSettingsProvider，仅在状态变化时重建UI，性能更优；
• 布局规范：统一设置padding，保证页面边距一致，符合移动端设计规范；
• 组件拆分：将UI拆分为多个功能区域（显示设置、样式设置等），结构更清晰。

构建“显示设置”区域，强化视觉分层和交互提示：

Widget _buildDisplaySection(BuildContext context, provider) {
  return Card(
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Text('显示设置', style: Theme.of(context).textTheme.titleMedium),
          SwitchListTile(
            value: provider.settings.showRiskLayer,
            onChanged: (v) => provider.updateSetting('show_risk_layer', v),
            title: const Text('风险图层'),
          ),
        ],
      ),
    ),
  );
}

显示设置区域的设计细节：

• 容器选择：使用Card组件包裹，与其他区域形成视觉分隔，层次更分明；
• 样式适配：使用Theme获取系统字体样式，保证与应用主题统一；
• 交互简化：直接调用provider.updateSetting，无需在UI层处理存储逻辑，解耦更彻底。

构建地图类型选择对话框，优化交互流程：

void _showMapTypeDialog(BuildContext context, provider) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('选择地图类型'),
      content: Column(
        children: MapType.values.map((type) {
          return RadioListTile<MapType>(
            title: Text(_getMapTypeText(type)),
            value: type,
            groupValue: provider.settings.mapType,
            onChanged: (v) => provider.updateSetting('map_type', v!),
          );
        }).toList(),
      ),
    ),
  );
}

对话框设计要点：

• 数据驱动：通过MapType.values遍历所有地图类型，新增类型时无需修改对话框代码；
• 单选交互：使用RadioListTile实现单选逻辑，符合用户对“选择类型”的操作习惯；
• 即时更新：选择后直接调用更新方法，关闭对话框后UI立即刷新。

13. 小结

地图设置的实现展现了 Flutter 开发的几个重要原则：

状态管理：使用 Provider 管理复杂设置状态

持久化存储：SharedPreferences 的最佳实践

用户体验：分组设置、即时预览、确认对话框

组件化设计：可复用的设置组件和对话框

错误处理：完善的异常处理和用户反馈

这样的设计不仅满足了地图设置的基本需求，还为后续的功能扩展（如主题切换、多语言支持等）提供了良好的基础架构。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net