易得天气
完成了生活指数面板UI，至此天气预报界面的UI全部完成
效果图
页面布局
Grid() {
ForEach(this.weatherItemData?.weatherData?.indexes, (item: WeatherIndexData) => {
this.lifeIndexItem(item)
}, (item: WeatherIndexData) => item.name)
}
.columnsTemplate('1fr 1fr 1fr')
.maxCount(3)
.layoutDirection(GridDirection.Row)
.padding({ top: Constants.ITEM_STICKY_HEIGHT })
.clipShape(new PathShape({ commands: this.panelPathCommands }))
@Builder
lifeIndexItem(item: WeatherIndexData) {
GridItem() {
Column() {
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: item.ext?.icon,
placeholderSrc: $r('app.color.transparent'),
errorholderSrc: $r('app.color.transparent'),
objectFit: ImageFit.Contain
}
}).width(48).height(48)
Blank().height(8)
Text(item.value)
.fontSize(13)
.fontColor($r('app.color.special_white'))
}
.height(this.columnHeight)
.justifyContent(FlexAlign.Center)
}
}
Footer布局
if (StrUtil.isNotEmpty(this.source)) {
this.footer()
}
@Builder
footer() {
ListItem() {
Column() {
Text(`天气信息来自${this.source}`)
.fontSize(12)
.fontColor(ColorUtils.alpha(this.weatherMainVM.isDark ? $r('app.color.special_white') :
$r('app.color.special_black'), 0.4))
Blank().height(12)
OpacityLayout({
child: () => {
this.cardSortButton()
},
onTap: () => {
}
})
}
.width('100%')
.alignItems(HorizontalAlign.Center)
.margin({ bottom: px2vp(AppUtil.getNavigationIndicatorHeight()) + 8 })
}
}
@Builder
cardSortButton() {
Row() {
Image($r('app.media.ic_sort_icon'))
.width(18)
.height(18)
.colorFilter(ColorUtils.translateColor(this.weatherMainVM.isDark ? $r('app.color.special_white') :
$r('app.color.special_black'), 0.5))
Blank().width(4)
Text('卡片排序')
.fontSize(15)
.fontColor(ColorUtils.alpha(this.weatherMainVM.isDark ? $r('app.color.special_white') :
$r('app.color.special_black'), 0.5))
}
.padding({
left: 10,
top: 6,
right: 10,
bottom: 6
})
.borderRadius(6)
.borderWidth(0.5)
.borderColor(ColorUtils.alpha(this.weatherMainVM.isDark ? $r('app.color.special_white') :
$r('app.color.special_black'), 0.5))
}
