SuperAPI AI 工具集

flutter-adding-home-screen-widgets

通用与其它

查看项目

更新于 10-15 21:55

技能介绍

用途:为 Flutter 应用添加 Android 与 iOS 主屏幕小组件,用于在设备主屏提供速览信息或快捷操作。

架构与数据流:小组件需原生 UI 实现(iOS 用 SwiftUI,Android 用 XML/Kotlin)。Flutter 应用通过 home_widget 包,借助共享本地存储(iOS 的 UserDefaults、Android 的 SharedPreferences)与原生小组件通信。流程为:Flutter 写入键值对或渲染图片到共享容器;通知原生系统更新小组件;原生小组件读取数据并刷新 UI。

Flutter 侧用法:在 initState() 或启动时调用 HomeWidget.setAppGroupId('<YOUR_APP_GROUP>');用 HomeWidget.saveWidgetData<T>('key', value) 写入数据;调用 HomeWidget.updateWidget(iOSName: 'YourIOSWidget', androidName: 'YourAndroidWidget') 触发更新;构建后检查控制台是否有插件注册缺失。

iOS 侧:在 Xcode 打开 ios/Runner.xcworkspace,新增 Widget Extension 目标;为 Runner 与扩展配置 App Groups,ID 需与 Dart 一致;定义 TimelineEntry,在 TimelineProvider 的 getSnapshot/getTimeline 中用 UserDefaults(suiteName:) 读取键值;用 SwiftUI 构建视图。

Android 侧:在 Android Studio 中新建 App Widget,编辑 res/layout 布局;在 AppWidgetProvider 的 onUpdate 中用 HomeWidgetPlugin.getData(context) 取数据,通过 RemoteViews 的 setTextViewText 或 setImageViewBitmap 更新,并调用 appWidgetManager.updateAppWidget。

高级技巧:UI 过于复杂时,可用 GlobalKey 包裹 Flutter 组件并调用 HomeWidget.renderFlutterWidget() 渲染为图片,原生端读取路径后显示;iOS 可使用自定义 Flutter 字体,通过 CTFontManagerRegisterFontsForURL 注册后用 Font.custom() 应用。

限制:需分别维护原生代码;App Group ID 必须两端一致;字体自定义仅限 iOS。具体收费与平台支持细节暂未提供。