HarmonyOS ArkTS卡片深度解析：数据驱动 UI 与条件背景色热力图

HarmonyOS ArkTS卡片深度解析：数据驱动 UI 与条件背景色热力图

发布时间：2026/8/7 12:28:29
HarmonyOS ArkTS卡片深度解析：数据驱动 UI 与条件背景色热力图 一、引言天气卡片是本次系列中数据模型最清晰、视觉反馈最直观的应用。它模拟了城市天气展示页面核心功能是数据模型使用interface WeatherData定义城市天气数据结构选中展示点击城市列表项上方大卡片展示详细天气热力图背景根据温度动态切换卡片背景色——高温红色低温蓝色装饰性 UIemoji 天气图标、湿度/风速标签虽然这是一个模拟应用数据硬编码而非网络请求但它完美展示了数据驱动 UI的设计范式——所有 UI 变化都由selectedCity这一个状态变量驱动。二、完整源码// index9.etsinterfaceWeatherData{city:string;temp:number;weather:string;humidity:number;wind:string;}EntryComponentstruct Index9{StateselectedCity:number0;privatecities:WeatherData[][{city:北京,temp:28,weather:☀️ 晴,humidity:45,wind:3级},{city:上海,temp:32,weather: 多云,humidity:68,wind:4级},{city:广州,temp:35,weather: 雷阵雨,humidity:82,wind:5级},{city:深圳,temp:33,weather:☁️ 阴,humidity:75,wind:3级},{city:杭州,temp:30,weather: 小雨,humidity:70,wind:3级},{city:成都,temp:27,weather: 多云,humidity:60,wind:2级}];getBgColor(temp:number):string{if(temp35)return#FF3B30;if(temp30)return#FF9500;if(temp25)return#FFCC00;if(temp20)return#34C759;return#007AFF;}build(){Column(){Text(天气卡片).fontSize(28).fontWeight(FontWeight.Bold).margin({top:40,bottom:10})Text(this.cities[this.selectedCity].city).fontSize(32).fontWeight(FontWeight.Bold).fontColor(#333333).margin({bottom:5})Column(){Text(this.cities[this.selectedCity].weather).fontSize(28).margin({top:15})Text(this.cities[this.selectedCity].temp°C).fontSize(56).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).margin({top:5})Row({space:30}){Column(){Text( 湿度).fontSize(14).fontColor(rgba(255,255,255,0.8))Text(this.cities[this.selectedCity].humidity%).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)}Column(){Text( 风速).fontSize(14).fontColor(rgba(255,255,255,0.8))Text(this.cities[this.selectedCity].wind).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)}}.margin({top:15,bottom:20})}.width(85%).backgroundColor(this.getBgColor(this.cities[this.selectedCity].temp)).borderRadius(20).alignItems(HorizontalAlign.Center)Text(选择城市).fontSize(16).fontWeight(FontWeight.Bold).margin({top:25,bottom:10})List({space:8}){ForEach(this.cities,(item:WeatherData,index:number){ListItem(){Row(){Text(item.city).fontSize(16).fontWeight(this.selectedCityindex?FontWeight.Bold:FontWeight.Normal).layoutWeight(1)Text(item.temp°C).fontSize(16).fontColor(this.getBgColor(item.temp))Text(item.weather).fontSize(14).margin({left:8})}.width(100%).padding(12).backgroundColor(this.selectedCityindex?#E8F0FE:#F8F8F8).borderRadius(8).onClick((){this.selectedCityindex;})}},(item:WeatherData)item.city)}.width(85%).layoutWeight(1)}.width(100%).height(100%).justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Center)}}三、WeatherData 数据模型3.1 模型定义interfaceWeatherData{city:string;// 城市名称temp:number;// 温度摄氏度weather:string;// 天气描述含 emojihumidity:number;// 湿度百分比wind:string;// 风力描述}3.2 数据实例privatecities:WeatherData[][{city:北京,temp:28,weather:☀️ 晴,humidity:45,wind:3级},{city:上海,temp:32,weather: 多云,humidity:68,wind:4级},{city:广州,temp:35,weather: 雷阵雨,humidity:82,wind:5级},{city:深圳,temp:33,weather:☁️ 阴,humidity:75,wind:3级},{city:杭州,temp:30,weather: 小雨,humidity:70,wind:3级},{city:成都,temp:27,weather: 多云,humidity:60,wind:2级}];城市选择的设计考量城市温度天气设计意图北京28°C☀️ 晴典型北方夏季上海32°C 多云炎热广州35°C 雷阵雨酷热降雨深圳33°C☁️ 阴高湿闷热杭州30°C 小雨梅雨季成都27°C 多云相对凉爽温度覆盖27°C ~ 35°C涵盖凉爽→舒适→温暖→炎热→酷热所有区间确保每种背景色都能展示。四、热力图背景色4.1 温度-颜色映射getBgColor(temp:number):string{if(temp35)return#FF3B30;// 酷热 — 红色if(temp30)return#FF9500;// 炎热 — 橙色if(temp25)return#FFCC00;// 温暖 — 黄色if(temp20)return#34C759;// 舒适 — 绿色return#007AFF;// 凉爽 — 蓝色}颜色映射逻辑温度区间色值色相视觉感受≥ 35°C#FF3B30红色 炎热预警30-34°C#FF9500橙色 高温提醒25-29°C#FFCC00黄色 温暖舒适20-24°C#34C759绿色 凉爽宜人 20°C#007AFF蓝色 寒冷清凉4.2 getBgColor 的两处调用// ① 大卡片背景绑定当前选中城市温度.backgroundColor(this.getBgColor(this.cities[this.selectedCity].temp))// ② 列表项温度数值颜色Text(item.temp°C).fontColor(this.getBgColor(item.temp))一处给背景一处给文字色彩体系统一。4.3 热力图的用户感知35°C → 红色背景广州 33°C → 橙色背景深圳 32°C → 橙色背景上海 30°C → 橙色背景杭州 28°C → 黄色背景北京 27°C → 黄色背景成都用户无需看具体数字仅凭颜色就能感知哪个城市更热。这就是数据可视化的基本原理——用颜色编码量化数据。五、大卡片 UI 分析5.1 卡片结构┌─────────────────────────────────────┐ │ 北京 │ ← 城市名称 (32fp) │ ┌─────────────────────────────┐ │ │ │ ☀️ 晴 │ │ ← 天气 emoji (28fp) │ │ │ │ │ │ 28°C │ │ ← 温度 (56fp, 白色) │ │ │ │ │ │ 湿度 45% 风速 3级 │ │ ← 辅助信息 │ └─────────────────────────────┘ │ └─────────────────────────────────────┘5.2 温度文字Text(this.cities[this.selectedCity].temp°C).fontSize(56).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)56fp超大字号卡片的视觉焦点白色在彩色背景上高对比度清晰可读加粗增强视觉重量5.3 辅助信息行Row({space:30}){Column(){Text( 湿度).fontSize(14).fontColor(rgba(255,255,255,0.8))Text(this.cities[this.selectedCity].humidity%).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)}Column(){Text( 风速).fontSize(14).fontColor(rgba(255,255,255,0.8))Text(this.cities[this.selectedCity].wind).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)}}配色层次层级元素字号颜色透明度主要温度值56fp白色1.0次要湿度/风速值20fp白色1.0辅助标签文字14fp白色0.8rgba 半透明色的使用.fontColor(rgba(255,255,255,0.8))rgba(r, g, b, a)的第四个参数a0-1控制透明度。在不改变文字白色的前提下0.8 透明度让标签比值更淡形成视觉层次。六、城市列表选中态管理6.1 选中高亮ListItem(){Row(){Text(item.city).fontWeight(this.selectedCityindex?FontWeight.Bold:FontWeight.Normal).layoutWeight(1)Text(item.temp°C).fontColor(this.getBgColor(item.temp))Text(item.weather).fontSize(14).margin({left:8})}.backgroundColor(this.selectedCityindex?#E8F0FE:#F8F8F8).borderRadius(8).onClick((){this.selectedCityindex;})}选中态的视觉差异属性未选中已选中城市名字重FontWeight.NormalFontWeight.Bold背景色#F8F8F8浅灰#E8F0FE浅蓝selectedCity index这个比较贯穿整个应用// 城市名称字体Text(item.city).fontWeight(this.selectedCityindex?FontWeight.Bold:FontWeight.Normal)// 列表项背景.backgroundColor(this.selectedCityindex?#E8F0FE:#F8F8F8)// 温度颜色Text(item.temp°C).fontColor(this.getBgColor(item.temp))6.2 关键生成器ForEach(this.cities,(item:WeatherData,index:number){// ...},(item:WeatherData)item.city)使用城市名称作为 key因为城市名是唯一的。七、样式与交互细节7.1 大卡片圆角.width(85%).backgroundColor(...).borderRadius(20)20vp 的大圆角营造现代卡片 UI 风格。7.2 列表项点击区域ListItem(){Row(){...clickable items...}.onClick((){this.selectedCityindex;})}整个列表项都是可点击的Row 绑定 onClick而非仅文字区域。这是移动端 UI 的基本要求——点击区域 ≥ 44vpApple HIG 规范。7.3 State 的一处驱动StateselectedCity:number0;单个状态变量驱动整个页面变更触发影响组件selectedCity index点击城市列表大卡片城市名、天气、温度、湿度、风速、背景色全部更新selectedCity index点击城市列表列表项选中态高亮切换几乎所有 UI 都通过this.cities[this.selectedCity]间接依赖selectedCity。这是一个单一状态源的绝佳范例。八、扩展真实网络数据8.1 使用 HTTP 请求import{http}fromkit.NetworkKit;asyncfetchWeather(cityId:string):PromiseWeatherData{consthttpRequesthttp.createHttp();constresponseawaithttpRequest.request(https://api.weather.com/v1/cities/cityId/weather,{method:http.RequestMethod.GET,header:{Content-Type:application/json}});if(response.responseCode200){constdataJSON.parse(response.result.toString());return{city:data.name,temp:data.main.temp,weather:data.weather[0].description,humidity:data.main.humidity,wind:data.wind.speed级};}thrownewError(网络请求失败);}8.2 在组件中调用StateselectedCity:number0;Statecities:WeatherData[][];asyncaboutToAppear():Promisevoid{constcityIds[beijing,shanghai,guangzhou,shenzhen,hangzhou,chengdu];constresultsawaitPromise.all(cityIds.map(idthis.fetchWeather(id)));this.citiesresults;}九、总结通过天气卡片应用我们深入掌握了知识点重要程度关键代码interface数据建模必须掌握interface WeatherData { city, temp, ... }热力图条件背景色核心设计getBgColor(temp)温度→颜色映射选中态管理基础交互selectedCity index比较单状态驱动多 UI架构设计一个State驱动整个页面rgba半透明色视觉优化rgba(255,255,255,0.8)emoji 装饰性图标用户体验☀️晴字符串内嵌列表选中高亮常用模式背景色 字重联合变化数据与 UI 分离架构原则cities[]硬编码模拟数据层天气卡片展示了数据驱动 UI的最佳实践——一个selectedCity状态变量驱动了十几个 UI 元素的联动变化。