SwiftUI中如何根据用户当前时间实现动态颜色（渐变）切换

核心实现逻辑说明 #

不要用字符串格式的时间（如"05:00"）做匹配判断：不同用户设备的时间格式、时区设置存在差异，直接通过系统日历API获取当前小时的整数值做区间判断，稳定性最高，也不需要处理分钟级的频繁重绘。

第一步：获取设备真实本地时间 #

直接调用系统原生时间API即可自动适配用户设备的时区、时间设置，不需要额外权限：

• iOS/macOS（SwiftUI）：通过Date()获取当前时间，用Calendar.current提取小时字段
• Android（Compose）：通过LocalDateTime.now()获取当前时间，提取hour字段
• 跨端框架：直接调用对应框架提供的本地时间接口，统一取0-23范围的小时整数值即可

第二步：时段配色映射实现 #

以下是适配全天场景的渐变配色参考，可根据产品视觉需求调整色值：

• 00:00-04:59（深夜）：深紫暗蓝渐变
• 05:00-08:59（早晨）：浅天蓝淡橙日出渐变
• 09:00-11:59（上午）：淡蓝明黄晴日渐变
• 12:00-16:59（正午）：亮蓝浅白晴空渐变
• 17:00-19:59（傍晚）：橙红粉紫日落渐变
• 20:00-23:59（夜晚）：紫色藏蓝夜间渐变

以SwiftUI实现为例，全局函数代码如下：

import SwiftUI

// 全局可用的时段渐变获取函数
func getTimeBasedBackground() -> LinearGradient {
    let currentHour = Calendar.current.component(.hour, from: Date())
    
    switch currentHour {
    case 0..<5:
        return LinearGradient(
            colors: [Color(red: 0.10, green: 0.05, blue: 0.30), Color(red: 0.05, green: 0.10, blue: 0.25)],
            startPoint: .top, endPoint: .bottom
        )
    case 5..<9:
        return LinearGradient(
            colors: [Color(red: 0.60, green: 0.85, blue: 0.98), Color(red: 0.99, green: 0.80, blue: 0.55)],
            startPoint: .top, endPoint: .bottom
        )
    case 9..<12:
        return LinearGradient(
            colors: [Color(red: 0.45, green: 0.75, blue: 0.98), Color(red: 0.98, green: 0.95, blue: 0.50)],
            startPoint: .top, endPoint: .bottom
        )
    case 12..<17:
        return LinearGradient(
            colors: [Color(red: 0.25, green: 0.65, blue: 0.95), Color(red: 0.80, green: 0.95, blue: 0.98)],
            startPoint: .top, endPoint: .bottom
        )
    case 17..<20:
        return LinearGradient(
            colors: [Color(red: 0.95, green: 0.45, blue: 0.30), Color(red: 0.60, green: 0.30, blue: 0.70)],
            startPoint: .top, endPoint: .bottom
        )
    case 20..<24:
        return LinearGradient(
            colors: [Color(red: 0.30, green: 0.15, blue: 0.55), Color(red: 0.12, green: 0.10, blue: 0.35)],
            startPoint: .top, endPoint: .bottom
        )
    default:
        return LinearGradient(
            colors: [Color(red: 0.25, green: 0.65, blue: 0.95), Color(red: 0.80, green: 0.95, blue: 0.98)],
            startPoint: .top, endPoint: .bottom
        )
    }
}

调用方式 #

直接在应用根视图将返回值作为背景填充即可，如需跨时段平滑切换，可以给背景加0.3s的隐式动画避免生硬跳变：

struct WeatherMainView: View {
    var body: some View {
        // 页面业务内容
        .background {
            getTimeBasedBackground()
                .animation(.easeInOut(duration: 0.3), value: Calendar.current.component(.hour, from: Date()))
        }
        .ignoresSafeArea()
    }
}

注意：如果应用在前台持续运行超过1小时，可以加个每分钟触发一次的定时器，检查小时是否变化，触发背景更新即可，不需要高频刷新。

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