如何为DynamicIslandExpandedRegion(.bottom)设置背景色？（仿Flighty效果）

要实现类似Flighty应用的展开灵动岛底部背景效果，你可以通过SwiftUI的DynamicIsland配置，给展开区域的内容添加全屏背景来实现，具体步骤如下：

1. 定义灵动岛的完整配置 #

创建DynamicIsland实例时，重点在**展开区域（expandedRegion）**中设置自定义背景，让背景铺满整个展开的灵动岛范围：

import SwiftUI
import ActivityKit

// 先定义活动属性示例
struct FlightTrackingAttributes: ActivityAttributes {
    public struct ContentState: Codable, Hashable {
        var flightNumber: String
        var status: String
    }
}

struct FlightTrackingLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: FlightTrackingAttributes.self) { context in
            DynamicIsland {
                // 展开状态的核心内容
                VStack(spacing: 12) {
                    Text("航班 \(context.state.flightNumber)")
                        .font(.headline)
                        .foregroundColor(.white)
                    Text(context.state.status)
                        .font(.subheadline)
                        .foregroundColor(.white.opacity(0.9))
                }
                .padding()
                // 让背景铺满整个展开区域
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.blue.opacity(0.85)) // 自定义背景色及透明度
            } compactLeading: {
                Image(systemName: "airplane")
                    .foregroundColor(.white)
            } compactTrailing: {
                Text(context.state.flightNumber)
                    .foregroundColor(.white)
            } minimal: {
                Image(systemName: "airplane")
                    .foregroundColor(.white)
            }
            .dynamicIslandBackground(Color.black) // 灵动岛基础背景（可选）
        }
    }
}

2. 核心实现细节 #

• 全屏背景适配：通过frame(maxWidth: .infinity, maxHeight: .infinity)让背景视图自动填充系统分配的展开区域高度，确保底部也被完全覆盖。
• 背景层级控制：展开区域内的.background()修饰符会覆盖系统默认背景，你可以直接设置纯色、渐变或图片背景。
• 内容对比度：注意调整背景色透明度，保证前景文字的可读性，避免出现视觉冲突。

3. 测试注意事项 #

• 必须在支持灵动岛的真机上测试，模拟器无法完全还原灵动岛的交互和视觉效果。
• 灵动岛的展开高度由系统动态控制，无需手动指定固定值，背景会自动适配。

内容的提问来源于stack exchange，提问作者Samuel Vanhaecke