当前位置：首页 > web >正文

根据蓝牙名称自动匹配对应 UI

web 2025/5/11 3:38:37

要实现“根据蓝牙名称自动匹配对应 UI”，并且支持未来不断增加的按摩椅型号和UI，推荐采用插件式UI注册+自动路由的架构。下面是详细的可执行方案，适合你当前的 Flutter 项目结构：

1. 目录结构设计

假设每个按摩椅型号有独立的UI页面，建议目录结构如下：

lib/ui/page/massage/common/                # 公共组件、基类chair_control_screen.dartmodel_a/               # 型号Achair_control_screen_a.dartmodel_b/               # 型号Bchair_control_screen_b.dart...

2. UI注册与自动匹配机制

2.1 定义UI注册表

在 lib/ui/page/massage/common/ 下新建 massage_ui_registry.dart：

// lib/ui/page/massage/common/massage_ui_registry.dart
import 'package:flutter/widgets.dart';typedef MassageUIScreenBuilder = Widget Function();class MassageUIRegistry {static final Map<String, MassageUIScreenBuilder> _registry = {};static void register(String modelKey, MassageUIScreenBuilder builder) {_registry[modelKey] = builder;}static Widget? getScreenForModel(String modelKey) {return _registry[modelKey]?.call();}
}

2.2 各型号UI注册

每个型号的UI在其入口文件注册自己。例如 model_a/chair_control_screen_a.dart：

// lib/ui/page/massage/model_a/chair_control_screen_a.dart
import '../common/massage_ui_registry.dart';
import 'package:flutter/material.dart';class ChairControlScreenA extends StatelessWidget {// ... UI实现 ...@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text('型号A UI')));}
}// 注册到UI注册表
void registerModelAUI() {MassageUIRegistry.register('MODEL_A', () => ChairControlScreenA());
}

在 main.dart 或 app 启动时统一注册所有型号UI：

import 'ui/page/massage/model_a/chair_control_screen_a.dart' as model_a;
import 'ui/page/massage/model_b/chair_control_screen_b.dart' as model_b;
// ... 其他型号void main() {model_a.registerModelAUI();model_b.registerModelBUI();// ...runApp(MyApp());
}

3. 蓝牙名称与型号Key的映射

新建 lib/ui/page/massage/common/model_key_mapper.dart：

// lib/ui/page/massage/common/model_key_mapper.dart
class ModelKeyMapper {static String getModelKeyFromBluetoothName(String bluetoothName) {// 这里可以用正则或前缀匹配if (bluetoothName.startsWith('A-')) return 'MODEL_A';if (bluetoothName.startsWith('B-')) return 'MODEL_B';// ... 其他规则return 'DEFAULT'; // 默认UI}
}

4. 自动路由到对应UI

在你需要展示按摩椅UI的地方（比如连接蓝牙后），这样写：

import 'common/massage_ui_registry.dart';
import 'common/model_key_mapper.dart';Widget buildChairScreen(String bluetoothName) {final modelKey = ModelKeyMapper.getModelKeyFromBluetoothName(bluetoothName);final screen = MassageUIRegistry.getScreenForModel(modelKey);if (screen != null) {return screen;} else {// 返回默认UI或错误提示return ChairControlScreen(); // 默认UI}
}