如何使用Flutter将时钟背景设置为手机锁屏显示

Flutter本身没有直接操作系统锁屏的API，需要结合Android/iOS的原生能力来实现，以下是分平台的具体方案：

Android 实现步骤 #

Android侧需要借助**锁屏小组件（Keyguard Widget）**完成，通过Flutter与原生通信配置：

1. 创建原生AppWidgetProvider
   在Android项目src/main/kotlin/[包名]下新建LockScreenClockWidget.kt，实现时钟绘制与定时更新：

   class LockScreenClockWidget : AppWidgetProvider() {
       override fun onUpdate(context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray) {
           appWidgetIds.forEach { appWidgetId ->
               val views = RemoteViews(context.packageName, R.layout.lock_screen_clock).apply {
                   val currentTime = SimpleDateFormat("HH:mm", Locale.getDefault()).format(Date())
                   setTextViewText(R.id.clock_text, currentTime)
               }
               appWidgetManager.updateAppWidget(appWidgetId, views)
           }
       }
   
       override fun onEnabled(context: Context) {
           // 每分钟刷新一次时间
           val alarmManager = context.getSystemService(Context.ALARM_SERVICE) as AlarmManager
           val intent = Intent(context, LockScreenClockWidget::class.java).apply {
               action = AppWidgetManager.ACTION_APPWIDGET_UPDATE
           }
           val pendingIntent = PendingIntent.getBroadcast(context, 0, intent, PendingIntent.FLAG_IMMUTABLE)
           alarmManager.setRepeating(
               AlarmManager.RTC, System.currentTimeMillis(), 60000, pendingIntent
           )
       }
   }
   

2. 配置Widget布局与权限

   • 在res/layout下创建lock_screen_clock.xml，放置居中显示的时间文本：

     <TextView xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/clock_text"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:gravity="center"
         android:textSize="48sp"
         android:textColor="#FFFFFF"/>
     

   • 在res/xml下创建lock_screen_clock_info.xml，声明支持锁屏显示：

     <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
         android:minWidth="180dp"
         android:minHeight="180dp"
         android:updatePeriodMillis="0"
         android:initialLayout="@layout/lock_screen_clock"
         android:widgetCategory="home_screen|keyguard"/>
     

   • 在AndroidManifest.xml中注册Widget：

     <receiver android:name=".LockScreenClockWidget">
         <intent-filter>
             <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
         </intent-filter>
         <meta-data
             android:name="android.appwidget.provider"
             android:resource="@xml/lock_screen_clock_info"/>
     </receiver>
     

3. Flutter端触发Widget添加
   通过MethodChannel让用户在Flutter中打开Widget添加界面：

   import 'package:flutter/services.dart';
   
   class LockScreenService {
     static const MethodChannel _channel = MethodChannel('lock_screen_clock');
   
     static Future<void> openWidgetSettings() async {
       try {
         await _channel.invokeMethod('openWidgetSettings');
       } on PlatformException catch (e) {
         print("操作失败: ${e.message}");
       }
     }
   }
   

   原生端实现MethodChannel方法：

   class MainActivity : FlutterActivity() {
       private val CHANNEL = "lock_screen_clock"
   
       override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
           super.configureFlutterEngine(flutterEngine)
           MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
               if (call.method == "openWidgetSettings") {
                   val intent = Intent(AppWidgetManager.ACTION_APPWIDGET_PICK).apply {
                       putExtra(AppWidgetManager.EXTRA_APPWIDGET_PROVIDER, ComponentName(this@MainActivity, LockScreenClockWidget::class.java))
                   }
                   startActivity(intent)
                   result.success(null)
               } else {
                   result.notImplemented()
               }
           }
       }
   }
   

iOS 实现步骤 #

iOS 16+支持锁屏小组件，需要创建Lock Screen Widget Extension：

1. 添加Widget扩展
   在Xcode中选择项目 → Targets → "+" → 选择"Widget Extension"，命名后勾选"Include Configuration Intent"。

2. 实现锁屏时钟Widget
   修改LockScreenClock.swift，实现时间显示与定时刷新：

   import WidgetKit
   import SwiftUI
   
   struct Provider: TimelineProvider {
       func placeholder(in context: Context) -> SimpleEntry {
           SimpleEntry(date: Date())
       }
   
       func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
           let entry = SimpleEntry(date: Date())
           completion(entry)
       }
   
       func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
           let currentDate = Date()
           let nextMinute = Calendar.current.date(byAdding: .minute, value: 1, to: currentDate)!
           let entries = [SimpleEntry(date: currentDate)]
           let timeline = Timeline(entries: entries, policy: .after(nextMinute))
           completion(timeline)
       }
   }
   
   struct SimpleEntry: TimelineEntry {
       let date: Date
   }
   
   struct LockScreenClockEntryView : View {
       var entry: Provider.Entry
       private let dateFormatter: DateFormatter = {
           let formatter = DateFormatter()
           formatter.timeStyle = .medium
           return formatter
       }()
   
       var body: some View {
           Text(dateFormatter.string(from: entry.date))
               .font(.largeTitle)
               .foregroundColor(.white)
               .frame(maxWidth: .infinity, maxHeight: .infinity)
               .background(Color.black)
       }
   }
   
   struct LockScreenClock: Widget {
       let kind: String = "LockScreenClock"
   
       var body: some WidgetConfiguration {
           StaticConfiguration(kind: kind, provider: Provider()) { entry in
               LockScreenClockEntryView(entry: entry)
           }
           .configurationDisplayName("锁屏时钟")
           .description("在锁屏显示当前时间")
           .supportedFamilies([.accessoryCircular, .accessoryRectangular, .accessoryInline])
       }
   }
   

3. 配置扩展支持锁屏显示
   在扩展的Info.plist中确保添加锁屏小组件类型：

   <key>NSExtension</key>
   <dict>
       <key>NSExtensionAttributes</key>
       <dict>
           <key>widgetFamily</key>
           <array>
               <string>accessoryCircular</string>
               <string>accessoryRectangular</string>
               <string>accessoryInline</string>
           </array>
       </dict>
       <key>NSExtensionMainStoryboard</key>
       <string>Main</string>
       <key>NSExtensionPointIdentifier</key>
       <string>com.apple.widgetkit-extension</string>
   </dict>
   

注意事项 #

• Android用户需手动将小组件拖到锁屏区域，部分ROM可能限制锁屏Widget功能，需测试适配。
• iOS用户需在锁屏编辑界面手动添加该小组件，iOS 15及以下不支持锁屏自定义小组件。
• 时间更新逻辑需考虑系统休眠：Android可使用setExactAndAllowWhileIdle优化Doze模式下的刷新；iOS的TimelineProvider会自动处理后台刷新。

内容的提问来源于stack exchange，提问作者Amine ACHOUHAME