美化歌词设置页面UI

entry/src/main/ets/pages/WebDavMainPage.ets

@@ -2027,24 +2027,30 @@ export struct WebDavMainPage {
 
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.text_and_arrow_up')),
-        content: $r('app.string.sort_by_name')
+        content: $r('app.string.sort_by_name'),
+        symbolEndIcon: this.sortType === 0 ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortItemBackground(0))
         .onClick(async () => {
           this.doSortType(0)
           PreferencesUtil.put("webDavSortType", 0)
         })
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.text_and_arrow_down')),
-        content: '按名称降序'
+        content: '按名称降序',
+        symbolEndIcon: this.sortType === 1 ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortItemBackground(1))
         .onClick(async () => {
           this.doSortType(1)
           PreferencesUtil.put("webDavSortType", 1)
         })
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.clock')),
-        content:'按时间升序'
+        content:'按时间升序',
+        symbolEndIcon: this.sortType === 2 ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortItemBackground(2))
         .onClick(async () => {
           this.doSortType(2)
           PreferencesUtil.put("webDavSortType", 2)
@@ -2052,8 +2058,10 @@ export struct WebDavMainPage {
 
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.timer')),
-        content: '按时间降序'
+        content: '按时间降序',
+        symbolEndIcon: this.sortType === 3 ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortItemBackground(3))
         .onClick(async () => {
           this.doSortType(3)
           PreferencesUtil.put("webDavSortType", 3)
@@ -2061,8 +2069,10 @@ export struct WebDavMainPage {
         })
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.text_and_arrow_up')),
-        content:'按大小升序'
+        content:'按大小升序',
+        symbolEndIcon: this.sortType === 4 ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortItemBackground(4))
         .onClick(async () => {
           this.doSortType(4)
           PreferencesUtil.put("webDavSortType", 4)
@@ -2070,8 +2080,10 @@ export struct WebDavMainPage {
 
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.text_and_arrow_down')),
-        content: '按大小降序'
+        content: '按大小降序',
+        symbolEndIcon: this.sortType === 5 ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortItemBackground(5))
         .onClick(async () => {
           this.doSortType(5)
           PreferencesUtil.put("webDavSortType", 5)
@@ -2082,6 +2094,7 @@ export struct WebDavMainPage {
 
 
   doSortType(index: number) {
+    this.sortType = index;
     // 对歌曲列表进行排序
     switch (index) {
       case 0:
@@ -2129,6 +2142,17 @@ export struct WebDavMainPage {
     this.updateListData(this.songs,true)
   }
 
+  private getSortItemBackground(sortType: number): ResourceColor {
+    if (this.sortType !== sortType) {
+      return Color.Transparent;
+    }
+    const isAsc: boolean = sortType % 2 === 0;
+    if (isAsc) {
+      return this.isDarkMode ? '#295B8A' : '#DCEEFF';
+    }
+    return this.isDarkMode ? '#7A4D22' : '#FFE9D5';
+  }
+
 
   @Builder
   topTitleBar(){
@@ -2427,26 +2451,75 @@ export struct WebDavMainPage {
     .padding({ left: 2, right: 2, top: 4, bottom: 4 })
   }
 
+  @Builder
+  private SongPropertyCoverRow(label: string, coverPath: string | undefined) {
+    Column({ space: 8 }) {
+      Text(label)
+        .fontSize(12)
+        .fontColor($r('app.color.index_tab_font_color'))
+        .opacity(0.7)
+      if (StrUtil.isNotEmpty(coverPath)) {
+        Image(coverPath as string)
+          .width(136)
+          .height(136)
+          .borderRadius(10)
+          .sourceSize({ width: 136, height: 136 })
+          .objectFit(ImageFit.Cover)
+          .alt($r('app.media.alt'))
+          .fillColor(this.themeColor)
+      } else {
+        Text('--')
+          .fontSize(14)
+          .fontColor($r('app.color.text_color'))
+      }
+    }
+    .width('100%')
+    .alignItems(HorizontalAlign.Start)
+    .padding({ left: 2, right: 2, top: 4, bottom: 4 })
+  }
+
+  @Builder
+  private SongPropertyLyricRow(label: string, lyricContent: string | undefined) {
+    Column({ space: 4 }) {
+      Text(label)
+        .fontSize(12)
+        .fontColor($r('app.color.index_tab_font_color'))
+        .opacity(0.7)
+      Text(this.getSongPropertyValue(lyricContent))
+        .fontSize(14)
+        .fontColor($r('app.color.text_color'))
+        .textAlign(TextAlign.Start)
+    }
+    .width('100%')
+    .alignItems(HorizontalAlign.Start)
+    .padding({ left: 2, right: 2, top: 4, bottom: 4 })
+  }
+
   @Builder
   private SongPropertySheetBuilder() {
     if (this.songForPropertySheet) {
-      Column({ space: 10 }) {
-        this.SongPropertyRow('歌曲名称', this.getSongPropertyValue(this.songForPropertySheet?.name))
-        this.SongPropertyRow('文件名称', this.getSongPropertyValue(this.songForPropertySheet?.fileName))
-        this.SongPropertyRow('艺术家', this.getSongPropertyValue(this.songForPropertySheet?.artist))
-        this.SongPropertyRow('专辑', this.getSongPropertyValue(this.songForPropertySheet?.album))
-        this.SongPropertyRow('时长', this.getSongPropertyValue(this.songForPropertySheet?.duration))
-        this.SongPropertyRow('文件大小', this.getSongPropertyValue(this.songForPropertySheet?.size))
-        this.SongPropertyRow('比特率', this.getSongPropertyValue(this.songForPropertySheet?.bit_rate))
-        this.SongPropertyRow('采样率', this.getSongPropertyValue(this.songForPropertySheet?.sampleRate))
-        this.SongPropertyRow('音乐封面', StrUtil.isNotEmpty(this.songForPropertySheet?.pixelMapPath) ? '有' : '无')
-        this.SongPropertyRow('内嵌歌词', StrUtil.isNotEmpty(this.songForPropertySheet?.lyricContent) ? '有' : '无')
-        this.SongPropertyRow('创建时间', this.getSongPropertyValue(this.songForPropertySheet?.cTime))
-        this.SongPropertyRow('来源类型', this.getSongTypeLabel(this.songForPropertySheet))
-        this.SongPropertyRow('文件路径', this.getSongPropertyValue(this.songForPropertySheet?.filePath))
+      Scroll() {
+        Column({ space: 10 }) {
+          this.SongPropertyRow('歌曲名称', this.getSongPropertyValue(this.songForPropertySheet?.name))
+          this.SongPropertyRow('文件名称', this.getSongPropertyValue(this.songForPropertySheet?.fileName))
+          this.SongPropertyRow('艺术家', this.getSongPropertyValue(this.songForPropertySheet?.artist))
+          this.SongPropertyRow('专辑', this.getSongPropertyValue(this.songForPropertySheet?.album))
+          this.SongPropertyRow('时长', this.getSongPropertyValue(this.songForPropertySheet?.duration))
+          this.SongPropertyRow('文件大小', this.getSongPropertyValue(this.songForPropertySheet?.size))
+          this.SongPropertyRow('比特率', this.getSongPropertyValue(this.songForPropertySheet?.bit_rate))
+          this.SongPropertyRow('采样率', this.getSongPropertyValue(this.songForPropertySheet?.sampleRate))
+          this.SongPropertyCoverRow('音乐封面', this.songForPropertySheet?.pixelMapPath)
+          this.SongPropertyLyricRow('内嵌歌词', this.songForPropertySheet?.lyricContent)
+          this.SongPropertyRow('创建时间', this.getSongPropertyValue(this.songForPropertySheet?.cTime))
+          this.SongPropertyRow('来源类型', this.getSongTypeLabel(this.songForPropertySheet))
+          this.SongPropertyRow('文件路径', this.getSongPropertyValue(this.songForPropertySheet?.filePath))
+        }
+        .width('100%')
+        .padding({ left: 12, right: 12, top: 8, bottom: 12 })
       }
       .width('100%')
-      .padding({ left: 12, right: 12, top: 8, bottom: 12 })
+      .height('100%')
+      .scrollBar(BarState.Auto)
     } else {
       Column() {
         Text('暂无歌曲属性信息')

entry/src/main/ets/view/LocalMusic.ets

@@ -2524,30 +2524,35 @@ export struct LocalMusic {
         builder: this.SubSortBuilder(SortMode.ByArtist),
         symbolEndIcon: this.isSortTypeInRange(SortMode.ByArtist) ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortModeItemBackground(this.isSortTypeInRange(SortMode.ByArtist)))
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.textformat_size_square')),
         content: "按专辑",
         builder: this.SubSortBuilder(SortMode.ByAlbum),
         symbolEndIcon: this.isSortTypeInRange(SortMode.ByAlbum) ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortModeItemBackground(this.isSortTypeInRange(SortMode.ByAlbum)))
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.textformat')),
         content: "按名称",
         builder: this.SubSortBuilder(SortMode.ByName),
         symbolEndIcon: this.isSortTypeInRange(SortMode.ByName) ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortModeItemBackground(this.isSortTypeInRange(SortMode.ByName)))
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.clock')),
         content: $r('app.string.sort_by_time'),
         builder: this.SubSortBuilder(SortMode.ByTime),
         symbolEndIcon: this.isSortTypeInRange(SortMode.ByTime) ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortModeItemBackground(this.isSortTypeInRange(SortMode.ByTime)))
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.music')),
         content: '按碟片音轨号',
         builder: this.SubSortBuilder(SortMode.ByDiscTrack),
         symbolEndIcon: this.isSortTypeInRange(SortMode.ByDiscTrack) ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortModeItemBackground(this.isSortTypeInRange(SortMode.ByDiscTrack)))
         .visibility((this.modeType==0||(this.modeType==2&&this.isCanBack)||
           (this.modeType==3&&this.isCanBack))?Visibility.Visible:Visibility.None)
 
@@ -2563,12 +2568,14 @@ export struct LocalMusic {
         builder: this.SubSortBuilder(SortMode.ByName),
         symbolEndIcon: this.isSortTypeInRange(SortMode.ByName) ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortModeItemBackground(this.isSortTypeInRange(SortMode.ByName)))
       MenuItem({
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.clock')),
         content: '按数量',
         builder: this.SubSortBuilder(SortMode.ByCount),
         symbolEndIcon: this.isSortTypeInRange(SortMode.ByCount) ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortModeItemBackground(this.isSortTypeInRange(SortMode.ByCount)))
 
     }.attributeModifier(new MenuModifier())
   }
@@ -2580,6 +2587,7 @@ export struct LocalMusic {
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.arrow_up')),
         symbolEndIcon: this.sortType === sortType ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortOrderItemBackground(this.sortType === sortType, true))
         .onClick(async () => {
           await this.doSortType(sortType)
         })
@@ -2588,6 +2596,7 @@ export struct LocalMusic {
         symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.arrow_down')),
         symbolEndIcon: this.sortType === sortType + 1 ? new SymbolGlyphModifier($r('sys.symbol.checkmark')) : undefined
       })
+        .backgroundColor(this.getSortOrderItemBackground(this.sortType === sortType + 1, false))
         .onClick(async () => {
           await this.doSortType(sortType + 1) // 降序的sortType = 升序的sortType + 1
         })
@@ -2718,6 +2727,23 @@ export struct LocalMusic {
     return this.sortType === baseSortType || this.sortType === baseSortType + 1;
   }
 
+  private getSortModeItemBackground(isSelected: boolean): ResourceColor {
+    if (!isSelected) {
+      return Color.Transparent;
+    }
+    return this.isDarkMode ? '#334967' : '#EAF2FF';
+  }
+
+  private getSortOrderItemBackground(isSelected: boolean, isAsc: boolean): ResourceColor {
+    if (!isSelected) {
+      return Color.Transparent;
+    }
+    if (isAsc) {
+      return this.isDarkMode ? '#295B8A' : '#DCEEFF';
+    }
+    return this.isDarkMode ? '#7A4D22' : '#FFE9D5';
+  }
+
   showSheelDialog() {
     // if(PreferencesUtil.getBooleanSync('isFirstMusic',true)) {
     //   this.showTips()
@@ -5357,7 +5383,7 @@ export struct LocalMusic {
 
         }
         .height('100%')
-        .layoutWeight(1)
+        .width('100%')
         .justifyContent(FlexAlign.Center)
         .alignItems(HorizontalAlign.Start)
 
@@ -12882,7 +12908,7 @@ export struct LocalMusic {
           .maxLines(1)
       }
       .zIndex(1)
-      .layoutWeight(1)
+      .width('100%')
       .margin({ left: 15 })
       Blank()
       Row(){
@@ -12922,7 +12948,7 @@ export struct LocalMusic {
           .hitTestBehavior(HitTestMode.Transparent)
 
       }
-      .layoutWeight(1)
+      .width('100%')
       .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
       .visibility(this.isHide ? Visibility.Hidden : Visibility.Visible)
       .onClick(() => {
@@ -13122,8 +13148,9 @@ export struct LocalMusic {
               .margin({ left: 12 })
             Blank()
           }
-          .width('76%')
+          .layoutWeight(1)
         }
+        .width('100%')
         .margin({
           left: 20,
           right: 15,
@@ -13152,8 +13179,9 @@ export struct LocalMusic {
               .margin({ left: 12 })
             Blank()
           }
-          .width('76%')
+          .layoutWeight(1)
         }
+        .width('100%')
         .margin({
           left: 20,
           right: 15,
@@ -13165,7 +13193,6 @@ export struct LocalMusic {
         Text(`歌词居中:`)
           .fontSize(14)
           .fontColor(Color.White)
-          .margin({ left: 2 })
         Row() {
           ForEach(['居中', '居左'], (size: string, index: number) => {
             Button(size)
@@ -13187,15 +13214,16 @@ export struct LocalMusic {
               .margin({ left: 10, right: 8 })
           })
         }
-        .width('76%')
+        .layoutWeight(1)
 
         Blank()
 
       }
+      .width('100%')
       .margin({
         top: 10,
         bottom: 10,
-        right: 20,
+        right: 15,
         left: 20
       })
 
@@ -13273,8 +13301,8 @@ export struct LocalMusic {
           })
 
         }
-        .width('76%')
-        .margin({ bottom: 5, right: 45, left: 20 })
+        .width('100%')
+        .margin({ bottom: 5, right: 15, left: 20 })
       }
       if (!isPip) {
         Row() {
@@ -13299,9 +13327,10 @@ export struct LocalMusic {
             Blank()
 
           }
-          .width('76%')
+          .layoutWeight(1)
 
         }
+        .width('100%')
         .margin({
           left: 20,
           right: 15,
@@ -13317,7 +13346,7 @@ export struct LocalMusic {
         Text(isPip ? this.currentLyricColorPip : this.currentLyricColor)
           .fontSize(15)
           .fontColor(Color.White)
-          .margin({ left: 12, right: 12 })
+          .margin({ left: 6, right: 6 })
         Column() {
         }
         .backgroundColor(isPip ? this.currentLyricColorPip : this.currentLyricColor)
@@ -13363,11 +13392,11 @@ export struct LocalMusic {
         })
 
       }
-      .width('76%')
+      .width('100%')
       .margin({
         top: 10,
         bottom: 10,
-        right: 45,
+        right: 15,
         left: 20
       })
 
@@ -13378,7 +13407,7 @@ export struct LocalMusic {
         Text(isPip ? this.currentHighLightLyricColorPip : this.currentHighLightLyricColor)
           .fontSize(15)
           .fontColor(Color.White)
-          .margin({ left: 12, right: 12 })
+          .margin({ left: 6, right: 6 })
         Column() {
         }
         .backgroundColor(isPip ? this.currentHighLightLyricColorPip : this.currentHighLightLyricColor)
@@ -13424,11 +13453,11 @@ export struct LocalMusic {
         })
 
       }
-      .width('76%')
+      .width('100%')
       .margin({
         top: 10,
         bottom: 10,
-        right: 45,
+        right: 15,
         left: 20
       })
 
@@ -13437,8 +13466,6 @@ export struct LocalMusic {
           Text(`显示宽度:`)
             .fontSize(14)
             .fontColor(Color.White)
-
-
           Slider({
             value: this.pipLyWidth,
             min: 10,
@@ -13457,7 +13484,7 @@ export struct LocalMusic {
                 PreferencesUtil.putSync('pipLyWidth', this.pipLyWidth)
               }
             })
-            .width('76%')
+            .layoutWeight(1)
 
         }
         .margin({
@@ -13471,8 +13498,6 @@ export struct LocalMusic {
           Text(`显示高度:`)
             .fontSize(14)
             .fontColor(Color.White)
-
-
           Slider({
             value: this.pipLyHeight,
             min: 10,
@@ -13491,7 +13516,7 @@ export struct LocalMusic {
                 PreferencesUtil.putSync('pipLyHeight', this.pipLyHeight)
               }
             })
-            .width('76%')
+            .layoutWeight(1)
 
         }
         .margin({
@@ -13506,8 +13531,6 @@ export struct LocalMusic {
         Text(`歌词字号:`)
           .fontSize(14)
           .fontColor(Color.White)
-          .margin({ right: 12 })
-
         Slider({
           value: isPip ? this.currentLyricSizePip : this.currentLyricSize,
           min: 12,
@@ -13527,13 +13550,13 @@ export struct LocalMusic {
         Text(this.getLyricSizeDisplayValue(isPip))
           .fontSize(13)
           .fontColor(Color.White)
-          .width(44)
-          .textAlign(TextAlign.End)
+          .textAlign(TextAlign.Start)
 
       }
+      .width('100%')
       .margin({
         left: 20,
-        right: 45,
+        right: 15,
         top: 5,
         bottom: 5
       })
@@ -13542,8 +13565,6 @@ export struct LocalMusic {
         Text(`高亮倍数:`)
           .fontSize(14)
           .fontColor(Color.White)
-          .margin({ right: 12 })
-
         Slider({
           value: isPip ? this.currentHightLyricSizePip : this.currentHightLyricSize,
           min: 1,
@@ -13563,14 +13584,14 @@ export struct LocalMusic {
         Text(this.getHighLyricSizeDisplayValue(isPip))
           .fontSize(13)
           .fontColor(Color.White)
-          .width(44)
-          .textAlign(TextAlign.End)
+          .textAlign(TextAlign.Start)
 
       }
+      .width('100%')
 
       .margin({
         left: 20,
-        right: 45,
+        right: 15,
         top: 5,
         bottom: 5
       })
@@ -13580,7 +13601,6 @@ export struct LocalMusic {
         Text(`歌词间隙:`)
           .fontSize(14)
           .fontColor(Color.White)
-          .margin({ right: 12 })
         Slider({
           value: isPip ? this.currentLyricLineSpacePip : this.currentLyricLineSpace,
           min: 0,
@@ -13600,15 +13620,12 @@ export struct LocalMusic {
         Text(this.getLyricLineSpaceDisplayValue(isPip))
           .fontSize(13)
           .fontColor(Color.White)
-          .width(44)
-          .textAlign(TextAlign.End)
-
-
+          .textAlign(TextAlign.Start)
       }
-
+      .width('100%')
       .margin({
         left: 20,
-        right: 45,
+        right: 15,
         top: 5,
         bottom: 5
       })
@@ -13618,7 +13635,6 @@ export struct LocalMusic {
         Text(`歌词字重:`)
           .fontSize(14)
           .fontColor(Color.White)
-          .margin({ right: 12 })
         Slider({
           value: isPip ? this.lyricTextWeightPip : this.lyricTextWeight,
           min: 100,
@@ -13646,15 +13662,12 @@ export struct LocalMusic {
         Text(this.getLyricTextWeightDisplayValue(isPip))
           .fontSize(13)
           .fontColor(Color.White)
-          .width(44)
-          .textAlign(TextAlign.End)
-
-
+          .textAlign(TextAlign.Start)
       }
-
+      .width('100%')
       .margin({
         left: 20,
-        right: 45,
+        right: 15,
         top: 5,
         bottom: 5
       })
@@ -13669,6 +13682,7 @@ export struct LocalMusic {
       .margin({ top: 3, bottom: 10 })
 
     }
+    .width('88%')
 
   }