天气

卡片

卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。

图4 卡片

• 背景
  • 背景色：设置组件卡片的背景颜色。
  • 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。
  • 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。
  • 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。
• 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。
• 边距：组件中图表距离整个组件四边（上、下、左、右，如图3）的距离，默认为0，即铺满整个组件。
  • 上边距：图表到组件边框顶部的距离。
  • 右边距：图表到组件边框右侧的距离。
  • 下边距：图表到组件边框底部的距离。
  • 左边距：图表到组件边框左侧的距离。

配置

在配置中，设置组件的年月日、背景颜色和时间条颜色等。

图5 配置

• 统一配置
  • 是否显示未来天气预测：是否展示未来一周的天气预报。
  • 背景颜色：天气预报的背景颜色。
• 今日温度
  • 是否显示：是否显示今日温度。
  • 字体：今日温度的字体、大小和颜色等设置。
• 天气图标
  • 是否显示：是否显示天气图标。
  • 图标大小：天气图标的大小。
  • 图标颜色：天气图标的颜色。
• 城市名字
  • 是否显示：是否显示城市名字。
  • 字体：城市名字的字体、大小和颜色等设置。
• 今日天气
  • 是否显示：是否显示今日天气。
  • 字体：今日天气的字体、大小和颜色等设置。
• 当前星期
  • 是否显示：是否显示当前星期。
  • 字体：今日星期的字体、大小和颜色等设置。
• 当前日期
  • 是否显示：是否显示当前日期。
  • 字体：今日日期的字体、大小和颜色等设置。
• 当前时间
  • 是否显示：是否显示当前时间。
  • 字体：当前时间的字体、大小和颜色等设置。
• 今日其他指标
  • 是否显示：是否显示今日其他天气指标。
  • 字体：今日其他天气指标的字体、大小和颜色等设置。
• 未来天气图标
  • 是否显示：是否显示未来天气图标。
  • 图标大小：未来天气图标的大小。
  • 图标颜色：未来天气图标的颜色。
• 未来最高温度
  • 是否显示：是否显示未来几天的最高温度。
  • 字体：未来几天最高温度的字体、大小和颜色等设置。
• 未来最低温度
  • 是否显示：是否显示未来几天的最低温度。
  • 字体：未来几天最低温度的字体、大小和颜色等设置。
• 未来星期展示
  • 是否显示：是否显示未来几天星期。
  • 字体：未来几天星期的字体、大小和颜色等设置。
• 未来日期展示
  • 是否显示：是否显示未来几天的日期。
  • 字体：未来几天日期的字体、大小和颜色等设置。

数据

在数据中，设置天气组件的数据来源，更多介绍请参见数据接入。

图6 设置组件数据源

图7 选择桥接器预置-静态数据

静态数据中，“dataNow”对应今日天气，“dataForecast”对应未来几天天气预报。

AstroCanvas预置了一套漂亮的天气图标，用于在天气组件上使用图标展示天气状况，并用字段“icon”表示今日天气图标，“iconDay”表示未来日期的天气图标。例如取值为“100”，表示晴天，界面会展示天气图标；取值为“307”，表示大雨，界面会展示天气图标。取值和天气的对应关系请参见表1。

交互

在交互中，配置天气组件与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。