瀏覽代碼

歌词自定义增加字重,高亮居中
修复歌词刚刚开始没播放转态 显示正常的歌词,而不是只有底部的两条

onecold 1 年之前
父節點
當前提交
dca4b1f554

+ 121 - 48
entry/src/main/ets/view/LocalMusic.ets

@@ -173,6 +173,7 @@ export struct LocalMusic {
   @State isGridMusic: boolean = false //是否网格布局
   @State customizeBgPath: string | undefined = '';
   @State isDarkMode: boolean = false
+  @State lyricTextWeight: number = 400
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
 
@@ -1414,7 +1415,7 @@ export struct LocalMusic {
   async callFilePickerSelectFile(): Promise<void> {
     try {
       let DocumentSelectOptions = new picker.DocumentSelectOptions();
-      DocumentSelectOptions.multiAuthMode = true
+      // DocumentSelectOptions.multiAuthMode = true
       DocumentSelectOptions.fileSuffixFilters = CommonConstants.MEDIA_FORMAT
       let documentPicker = new picker.DocumentViewPicker();
       documentPicker.select(DocumentSelectOptions).then((DocumentSelectResult) => {
@@ -3107,54 +3108,64 @@ export struct LocalMusic {
       }).getValue(this.currentBreakpoint)
     )
     .onScrollFrameBegin((offset: number) => {
-
-      if (this.currentWidthBreakpoint !== WidthBreakpoint.WIDTH_SM ||
+      //滚动小屏幕 比如puraX外屏和手机横屏可以隐藏bottomBarHeight topBarHeight
+      if(this.isPhoneLan()){
+        this.setBarHeightHide(offset)
+      }else if (this.currentWidthBreakpoint !== WidthBreakpoint.WIDTH_SM ||
         (this.currentHeightBreakpoint !== HeightBreakpoint.HEIGHT_MD &&
           this.currentHeightBreakpoint !== HeightBreakpoint.HEIGHT_SM)) {
-        this.hideDone = false;
-        this.getUIContext().animateTo({
-          duration: 300
-        }, () => {
-          this.bottomBarHeight = 55 + 0;
-          this.topBarHeight = 50 + 0;
-          this.barOpacity = 1;
-          this.currentYOffset = 0;
-          this.isHiding = false;
-        });
-
-        return { offsetRemain: offset };
-      }
-      if (offset > 0 && !this.hideDone) {
-        this.currentYOffset += offset;
-        if (this.currentYOffset <= 100) {
-          this.bottomBarHeight = this.bottomBarHeight * (1 - this.currentYOffset / 100);
-          this.topBarHeight = this.topBarHeight * (1 - this.currentYOffset / 100);
-          this.barOpacity = 1 - this.currentYOffset / 100;
-        } else {
-          this.topBarHeight = 0;
-          this.bottomBarHeight = 0;
-          this.barOpacity = 0;
-          this.hideDone = true;
-        }
-        this.isHiding = true;
-      }
-      if (offset < 0 && this.isHiding) {
-        this.hideDone = false;
-        this.getUIContext().animateTo({
-          duration: 300
-        }, () => {
-          this.bottomBarHeight = 55 + 0;
-          this.topBarHeight = 50 + 0;
-          this.barOpacity = 1;
-          this.currentYOffset = 0;
-          this.isHiding = false;
-        });
+          this.setBarHeightNormal()
+      }else{
+        this.setBarHeightHide(offset)
       }
+
       return { offsetRemain: offset };
     })
 
   }
 
+  setBarHeightNormal(){
+    this.hideDone = false;
+    this.getUIContext().animateTo({
+      duration: 300
+    }, () => {
+      this.bottomBarHeight = 55 + 0;
+      this.topBarHeight = 50 + 0;
+      this.barOpacity = 1;
+      this.currentYOffset = 0;
+      this.isHiding = false;
+    });
+  }
+
+  setBarHeightHide(offset: number){
+    if (offset > 0 && !this.hideDone) {
+      this.currentYOffset += offset;
+      if (this.currentYOffset <= 100) {
+        this.bottomBarHeight = this.bottomBarHeight * (1 - this.currentYOffset / 100);
+        this.topBarHeight = this.topBarHeight * (1 - this.currentYOffset / 100);
+        this.barOpacity = 1 - this.currentYOffset / 100;
+      } else {
+        this.topBarHeight = 0;
+        this.bottomBarHeight = 0;
+        this.barOpacity = 0;
+        this.hideDone = true;
+      }
+      this.isHiding = true;
+    }
+    if (offset < 0 && this.isHiding) {
+      this.hideDone = false;
+      this.getUIContext().animateTo({
+        duration: 300
+      }, () => {
+        this.bottomBarHeight = 55 + 0;
+        this.topBarHeight = 50 + 0;
+        this.barOpacity = 1;
+        this.currentYOffset = 0;
+        this.isHiding = false;
+      });
+    }
+  }
+
   private doPlay(item: VideoItem, index?: number, isFromSonPlayList?: boolean) {
     switch (item.type) {
       case CommonConstants.TYPE_IS_DIR:
@@ -4515,7 +4526,6 @@ export struct LocalMusic {
     // .backgroundImagePosition(Alignment.Center)
     // .backgroundColor(this.imageColor)
     .backgroundBlurStyle(this.isPuraWP()?BlurStyle.NONE:BlurStyle.BACKGROUND_ULTRA_THICK)
-
     .hitTestBehavior(HitTestMode.Transparent)
     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
   }
@@ -4605,8 +4615,8 @@ export struct LocalMusic {
   @State randomShakenY: number = 0
   @State lyricTextSize: number = 24
   @State lyricContent: string = ''
-  @State isDebug: boolean = DEBUG
-
+  @State isDebug: boolean = false
+  @State isHightLightCenter: boolean = false
   /**
    * 初始化歌词加载与展示逻辑
    * @param lyricPath 歌词文件路径(支持普通.lrc和加密.lrcc)
@@ -4646,6 +4656,10 @@ export struct LocalMusic {
     this.setHighLyricTextSize(PreferencesUtil.getNumberSync('HighLyricTextSize', 1.23))
     this.lyricController.setLineSpace(PreferencesUtil.getNumberSync('LyricLineSpace', 52))
     this.changeLyricColor(PreferencesUtil.getStringSync('LyricColor', '#FFFFFF'))
+    this.isHightLightCenter = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_SIMI, false)
+    this.lyricController.setHightLightCenter(this.isHightLightCenter)
+    this.lyricTextWeight = PreferencesUtil.getNumberSync('lyricTextWeight',400)
+    this.lyricController.setTextWeight(this.lyricTextWeight)
     this.showSingleLyric = false
     this.timeOffset = 0
     this.lyricController.setLyric(null)
@@ -5047,7 +5061,7 @@ export struct LocalMusic {
             this.isLyricSetting = !this.isLyricSetting;
           })
           .bindSheet($$this.isLyricSetting, this.lyricSettingSheet(), {
-            height: this.isCoverOpacity() ? '95%' : '78%',
+            height: this.isCoverOpacity() ? '95%' : '88%',
             dragBar: true,
             preferType: this.currentBreakpoint!==BreakpointTypeEnum.SM?SheetType.CENTER:SheetType.BOTTOM,
             showClose: true,
@@ -5373,13 +5387,13 @@ export struct LocalMusic {
 
         Column({ space: 8 }) {
           Text(this.name)
-            .fontSize(this.isPuraWP()?30:(this.name.length >= 28 || this.isCoverOpacity() ? 18 : 22))
+            .fontSize(this.isPuraWP()?24:(this.name.length >= 28 || this.isCoverOpacity() ? 18 : 22))
             .fontWeight(FontWeight.Bold)
             .textOverflow({ overflow: TextOverflow.MARQUEE })//超长滚动
             .maxLines(1)
             .fontColor(Color.White)
           Text(this.artist)
-            .fontSize(this.isPuraWP()?22:(this.isCoverOpacity() ? 12 : 15))
+            .fontSize(this.isPuraWP()?18:(this.isCoverOpacity() ? 12 : 15))
             .fontColor(Color.White)
             .fontWeight(FontWeight.Bold)
         }
@@ -5636,6 +5650,38 @@ export struct LocalMusic {
           .width('76%')
 
 
+      }
+      .margin({
+        left: 20,
+        right: 15,
+        top: 5,
+        bottom: 5
+      })
+      //取值间隔为100,默认为400,取值越大,字体越粗
+      Row() {
+        Text(`歌词字重:`)
+          .fontSize(14)
+          .fontColor(Color.White)
+        Slider({
+          value: this.lyricTextWeight,
+          min: 100,
+          max: 900,
+          step: 100,
+          style: SliderStyle.OutSet
+        })
+          .blockColor(Color.Red)
+          .trackColor($r('app.color.speed_text_color'))
+          .selectedColor(Color.White)
+          .trackThickness(6)
+          .onChange((value: number) => {
+            this.lyricTextWeight = value
+            this.lyricController.setTextWeight(this.lyricTextWeight)
+            PreferencesUtil.putSync('lyricTextWeight', this.lyricTextWeight)
+
+          })
+          .width('76%')
+
+
       }
       .margin({
         left: 20,
@@ -5675,6 +5721,33 @@ export struct LocalMusic {
         bottom: 15
       })
 
+      Row() {
+        Text(`高亮居中:`)
+          .fontSize(14)
+          .fontColor(Color.White)
+          .layoutWeight(1)
+          .margin({left:15})
+        Blank()
+        Toggle({ type: ToggleType.Switch, isOn: this.isHightLightCenter })
+          .selectedColor($r('app.color.tab_item_bg'))
+          .switchPointColor(Color.White)
+          .margin({ right: 18 })
+          .onChange((checked: boolean) => {
+            this.isHightLightCenter = checked;
+            PreferencesUtil.put(SettingPage.IS_SHOW_SIMI, this.isHightLightCenter)
+            this.lyricController.setHightLightCenter(this.isHightLightCenter)
+          })
+          .width(50)
+          .height(30);
+
+
+      }
+      .margin({
+        left: 20,
+        right: 15,
+        top: 5,
+        bottom: 15
+      })
 
       Row() {
         this.pushLyricButton($r('app.media.cut_current'), 0, '本地歌词')
@@ -5825,7 +5898,7 @@ export struct LocalMusic {
         .margin({ left: 6 })
         .fontColor('#FFFFFF')
     }
-    .visibility(step === 1 ? (Utility.isNoble() ? Visibility.Visible : Visibility.None) : Visibility.Visible)
+    // .visibility(step === 1 ? (Utility.isNoble() ? Visibility.Visible : Visibility.None) : Visibility.Visible)
     .onClick(() => {
       switch (step) {
         case 0:

+ 22 - 0
lib/src/main/ets/LyricController.ets

@@ -28,6 +28,9 @@ export class LyricController {
     private isBold: boolean = true
     private emptyHint: string = "--"
     private alignMode: "left" | "center" = "center"
+    private isHightLightCenter: boolean = true
+    private textWeight: number = FontWeight.Medium
+
     /**
      *  Listener to observe the lyric data set changed. This is a inner function, do not call this.
      */
@@ -71,6 +74,15 @@ export class LyricController {
         return this.lyric
     }
 
+    setTextWeight(textWeight: number): LyricController {
+        this.textWeight = textWeight
+        this.onInvalidated(false)
+        return this
+    }
+
+    getTextWeight(): number {
+        return this.textWeight
+    }
     /**
      * Set the color of normal lyric text. The default color is 0xff929292.
      * @param color The color of normal lyric text.
@@ -109,6 +121,16 @@ export class LyricController {
         return this.textSize
     }
 
+    setHightLightCenter(isHightLightCenter: boolean): LyricController {
+        this.isHightLightCenter = isHightLightCenter
+        this.onInvalidated(true)
+        return this
+    }
+
+    getHightLightCenter(): boolean {
+        return this.isHightLightCenter
+    }
+
     setBlurDegree(degree: number): LyricController {
         this.blurDegree = degree
         this.onInvalidated(true)

+ 1 - 1
lib/src/main/ets/parse/LyricParser.ts

@@ -32,7 +32,7 @@ export class LyricParser implements IParser {
             let line = src[i]
             console.info(`content The line of file:line ${line}`);
             if (line == "" || line == "\n" || line == "\r" || line == "\r\n" || line == "[Verse]" || line == "[Chorus]"
-                || line == "[PreChorus]"||line == "[Bridge]") {
+                || line == "[PreChorus]" || line == "[PreChorus]"||line == "[Bridge]") {
                 printW("the lyric line is empty, carriage return or line feed, line index= " + i)
                 continue
             }

+ 25 - 93
lib/src/main/ets/view/LyricView2.ets

@@ -49,6 +49,7 @@ export struct LyricView2 {
     @State isLyricEmpty: boolean = true // is no lyric.
     @State textSize: number = 16
     @State lineSpace: number = 16
+    @State textWeight: number = FontWeight.Medium
     @State textHighlightSize: number = 18
     @State textColor: string = '#000000'
     @State textHighlightColor: string = '#000000'
@@ -67,6 +68,8 @@ export struct LyricView2 {
     private autoHideSeekUIDuration = 2000
     @State isLoadingData: boolean = false
     private loadTimeout = -1
+    @State isHightLightCenter: boolean = true
+
     private onDataChangedListener = (lyric: Lyric | null) => {
         clearTimeout(this.loadTimeout)
         this.isLoadingData = true
@@ -93,10 +96,10 @@ export struct LyricView2 {
                 let lyricLines = this.currentLyric.lyricList;
                 if (lyricLines!==undefined&&lyricLines.length > 0) {
                     let first = lyricLines[0].beginTime;
-                    // fill the top empty gap
-                    for (let i = 0; i < this.centerOffsetSize; i++) {
-                        this.listAdapter.addData(new LyricLine(' ', 0, first), false);
-                    }
+                    // fill the top empty gap 注释掉修复 歌曲不播放的时候,可以显示完整的歌词,而不是显示一两行
+                    // for (let i = 0; i < this.centerOffsetSize; i++) {
+                    //     this.listAdapter.addData(new LyricLine(' ', 0, first), false);
+                    // }
                     lyricLines.forEach((line) => {
                         this.listAdapter.addData(line, false);
                     });
@@ -105,6 +108,7 @@ export struct LyricView2 {
                     for (let i = 0; i < this.centerOffsetSize; i++) {
                         this.listAdapter.addData(new LyricLine(' ', last + i, last + i), false);
                     }
+
                 }
 
                 this.listAdapter.notifyDataReload();
@@ -116,12 +120,14 @@ export struct LyricView2 {
         this.currentIndex = 0;
         this.animateToIndex(0);
         printW('loadData isEmpty = ' + this.isLyricEmpty);
+
     }
 
     private getAttrFromController() {
         this.currentLyric = this.controller.getLyric()
         this.textSize = this.controller.getTextSize()
         this.blurDegree = this.controller.getBlurDegree()
+        this.isHightLightCenter = this.controller.getHightLightCenter()
         this.lineSpace = this.controller.getLineSpace()
         this.textColor = this.controller.getTextColor()
         this.textHighlightColor = this.controller.getHighlightColor()
@@ -131,6 +137,7 @@ export struct LyricView2 {
         this.cacheSize = this.controller.getCacheSize()
         this.emptyHint = this.controller.getEmptyHint()
         this.alignMode = this.controller.getAlignMode()
+        this.textWeight = this.controller.getTextWeight()
     }
 
     aboutToAppear() {
@@ -164,89 +171,6 @@ export struct LyricView2 {
         return Math.max(0.5, 1 - distance * 0.18); // 透明度随着距离增加而减小
     }
 
-    // @Builder
-    // LyricListView() {
-    //     List({ space: this.lineSpace - 16, scroller: this.scroller }) {
-    //         LazyForEach(this.listAdapter, (item: LyricLine, index: number) => {
-    //             ListItem() {
-    //                 Flex({ direction: FlexDirection.Row }) {
-    //                     Text(item.text)
-    //                         .width('100%') // 确保宽度为整个容器宽度
-    //
-    //                         .fontSize(index == this.currentIndex ? this.textHighlightSize : this.textSize)
-    //                         .maxLines(index == this.currentIndex ? undefined : 2) // 未高亮时限制行数
-    //                         .opacity(this.calculateOpacityFactor(index, this.currentIndex))
-    //                         .blur(this.calculateBlurFactor(index, this.currentIndex))
-    //                         .textAlign(this.alignMode == 'center' ? TextAlign.Center : TextAlign.Start)
-    //                         .fontColor(index == this.currentIndex ? this.textHighlightColor : this.textColor)
-    //                         .fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold : FontWeight.Medium)
-    //                         .animation({ duration: this.animDuration, curve: Curve.FastOutSlowIn })
-    //
-    //                     // if (this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
-    //                     //     && this.enableSeek && this.isUserTouching) {
-    //                         Text(this.scrollDurationText)
-    //                             .fontSize(this.textSize)
-    //                             .fontColor(this.seekUIColor)
-    //                             .margin({right:22})
-    //                             .visibility(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
-    //                                 && this.enableSeek && this.isUserTouching?Visibility.Visible:Visibility.Hidden)
-    //
-    //                     // }
-    //                 }
-    //                 .align(Alignment.End)
-    //             }
-    //             .padding(8)
-    //             // .margin({right:20})
-    //             .border({ radius: 4 })
-    //             .backgroundColor(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
-    //                 && this.enableSeek && this.isUserTouching ? '#80a9a9a9' : '#00000000')
-    //             .onClick(() => {
-    //                 if (this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0) {
-    //                     if (this.seekIndex != -1 && this.seekIndex != this.currentIndex) {
-    //                         this.handleSeekAction();
-    //                     }
-    //                 }
-    //             })
-    //         },
-    //             (item: LyricLine, index: number) => {
-    //                 return item.text + '_' + index + '_' + item.beginTime + '_' + item.nextTime
-    //             })
-    //     }
-    //     .width('100%')
-    //     .height('100%')
-    //     .scrollBar(BarState.Off)
-    //     .cachedCount(this.cacheSize)
-    //     .visibility(this.isLoadingData ? Visibility.Hidden : Visibility.Visible)
-    //     .onScrollIndex((_, __, center) => {
-    //         if (this.isUserTouching) {
-    //             if (center >= 0 && center < this.listAdapter.totalCount()) {
-    //                 this.seekIndex = center;
-    //                 let targetPosition = this.listAdapter.getData(center).beginTime;
-    //                 this.scrollDurationText = duration2text(targetPosition);
-    //             } else {
-    //                 console.error(`Index out of range: ${center}`);
-    //             }
-    //         }
-    //     })
-    //     .onTouch((event) => {
-    //         let motion = event.touches[0];
-    //         switch (motion.type) {
-    //             case TouchType.Down:
-    //                 clearTimeout(this.seekUiHideTimeout);
-    //                 break;
-    //             case TouchType.Move:
-    //                 this.isUserTouching = true;
-    //                 break;
-    //             case TouchType.Up:
-    //             case TouchType.Cancel:
-    //                 this.seekUiHideTimeout = setTimeout(() => {
-    //                     this.seekIndex = -1;
-    //                     this.isUserTouching = false;
-    //                     this.animateToIndex(this.currentIndex);
-    //                 }, this.autoHideSeekUIDuration);
-    //         }
-    //     })
-    // }
 
     // 优化建议代码示例:增加滚动节流
     private lastScrollTime: number = 0
@@ -268,10 +192,12 @@ export struct LyricView2 {
                                 centerX: this.alignMode == 'center' ? '50%' : 0
                             })
                             .fontColor(index == this.currentIndex ? this.textHighlightColor : this.textColor)
+                            // .fontWeight(this.textWeight)
                             .fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold :
-                            FontWeight.Medium)// .padding({
+                            this.textWeight)
+                                // .padding({
                             .animation({ duration: this.animDuration, curve: Curve.FastOutSlowIn })
-                            .width(this.alignMode == 'center'?'100%':'80%')
+                            .width(this.alignMode == 'center'?'100%':'76%')
 
                         // if (this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
                         //     && this.enableSeek && this.isUserTouching) {
@@ -453,12 +379,18 @@ export struct LyricView2 {
         if (this.isUserTouching) {
             return
         }
-        // 计算目标索引,使其在居中位置上方有两条歌词
-        // const targetIndex = Math.max(0, index - 3);
-        // this.scroller.scrollToIndex(targetIndex, true, ScrollAlign.START);
-        this.scroller.scrollToIndex(index, true, ScrollAlign.CENTER)
+        if(this.isHightLightCenter){
+            this.scroller.scrollToIndex(index, true, ScrollAlign.CENTER)
+        }else{
+            // 计算目标索引,使其在居中位置上方有两条歌词
+            const targetIndex = Math.max(0, index - 2);
+            this.scroller.scrollToIndex(targetIndex, true, ScrollAlign.START);
+        }
+
+
     }
 
+
     private onPositionChanged(mediaPosition: number) {
         if (this.isLyricEmpty) {
             printW('The lyric data is empty!')

+ 22 - 0
oh_modules/@seagazer/cclyric/src/main/ets/LyricController.ets

@@ -28,6 +28,9 @@ export class LyricController {
     private isBold: boolean = true
     private emptyHint: string = "--"
     private alignMode: "left" | "center" = "center"
+    private isHightLightCenter: boolean = true
+    private textWeight: number = FontWeight.Medium
+
     /**
      *  Listener to observe the lyric data set changed. This is a inner function, do not call this.
      */
@@ -71,6 +74,15 @@ export class LyricController {
         return this.lyric
     }
 
+    setTextWeight(textWeight: number): LyricController {
+        this.textWeight = textWeight
+        this.onInvalidated(false)
+        return this
+    }
+
+    getTextWeight(): number {
+        return this.textWeight
+    }
     /**
      * Set the color of normal lyric text. The default color is 0xff929292.
      * @param color The color of normal lyric text.
@@ -109,6 +121,16 @@ export class LyricController {
         return this.textSize
     }
 
+    setHightLightCenter(isHightLightCenter: boolean): LyricController {
+        this.isHightLightCenter = isHightLightCenter
+        this.onInvalidated(true)
+        return this
+    }
+
+    getHightLightCenter(): boolean {
+        return this.isHightLightCenter
+    }
+
     setBlurDegree(degree: number): LyricController {
         this.blurDegree = degree
         this.onInvalidated(true)

+ 1 - 1
oh_modules/@seagazer/cclyric/src/main/ets/parse/LyricParser.ts

@@ -32,7 +32,7 @@ export class LyricParser implements IParser {
             let line = src[i]
             console.info(`content The line of file:line ${line}`);
             if (line == "" || line == "\n" || line == "\r" || line == "\r\n" || line == "[Verse]" || line == "[Chorus]"
-                || line == "[PreChorus]"||line == "[Bridge]") {
+                || line == "[PreChorus]" || line == "[PreChorus]"||line == "[Bridge]") {
                 printW("the lyric line is empty, carriage return or line feed, line index= " + i)
                 continue
             }

+ 25 - 93
oh_modules/@seagazer/cclyric/src/main/ets/view/LyricView2.ets

@@ -49,6 +49,7 @@ export struct LyricView2 {
     @State isLyricEmpty: boolean = true // is no lyric.
     @State textSize: number = 16
     @State lineSpace: number = 16
+    @State textWeight: number = FontWeight.Medium
     @State textHighlightSize: number = 18
     @State textColor: string = '#000000'
     @State textHighlightColor: string = '#000000'
@@ -67,6 +68,8 @@ export struct LyricView2 {
     private autoHideSeekUIDuration = 2000
     @State isLoadingData: boolean = false
     private loadTimeout = -1
+    @State isHightLightCenter: boolean = true
+
     private onDataChangedListener = (lyric: Lyric | null) => {
         clearTimeout(this.loadTimeout)
         this.isLoadingData = true
@@ -93,10 +96,10 @@ export struct LyricView2 {
                 let lyricLines = this.currentLyric.lyricList;
                 if (lyricLines!==undefined&&lyricLines.length > 0) {
                     let first = lyricLines[0].beginTime;
-                    // fill the top empty gap
-                    for (let i = 0; i < this.centerOffsetSize; i++) {
-                        this.listAdapter.addData(new LyricLine(' ', 0, first), false);
-                    }
+                    // fill the top empty gap 注释掉修复 歌曲不播放的时候,可以显示完整的歌词,而不是显示一两行
+                    // for (let i = 0; i < this.centerOffsetSize; i++) {
+                    //     this.listAdapter.addData(new LyricLine(' ', 0, first), false);
+                    // }
                     lyricLines.forEach((line) => {
                         this.listAdapter.addData(line, false);
                     });
@@ -105,6 +108,7 @@ export struct LyricView2 {
                     for (let i = 0; i < this.centerOffsetSize; i++) {
                         this.listAdapter.addData(new LyricLine(' ', last + i, last + i), false);
                     }
+
                 }
 
                 this.listAdapter.notifyDataReload();
@@ -116,12 +120,14 @@ export struct LyricView2 {
         this.currentIndex = 0;
         this.animateToIndex(0);
         printW('loadData isEmpty = ' + this.isLyricEmpty);
+
     }
 
     private getAttrFromController() {
         this.currentLyric = this.controller.getLyric()
         this.textSize = this.controller.getTextSize()
         this.blurDegree = this.controller.getBlurDegree()
+        this.isHightLightCenter = this.controller.getHightLightCenter()
         this.lineSpace = this.controller.getLineSpace()
         this.textColor = this.controller.getTextColor()
         this.textHighlightColor = this.controller.getHighlightColor()
@@ -131,6 +137,7 @@ export struct LyricView2 {
         this.cacheSize = this.controller.getCacheSize()
         this.emptyHint = this.controller.getEmptyHint()
         this.alignMode = this.controller.getAlignMode()
+        this.textWeight = this.controller.getTextWeight()
     }
 
     aboutToAppear() {
@@ -164,89 +171,6 @@ export struct LyricView2 {
         return Math.max(0.5, 1 - distance * 0.18); // 透明度随着距离增加而减小
     }
 
-    // @Builder
-    // LyricListView() {
-    //     List({ space: this.lineSpace - 16, scroller: this.scroller }) {
-    //         LazyForEach(this.listAdapter, (item: LyricLine, index: number) => {
-    //             ListItem() {
-    //                 Flex({ direction: FlexDirection.Row }) {
-    //                     Text(item.text)
-    //                         .width('100%') // 确保宽度为整个容器宽度
-    //
-    //                         .fontSize(index == this.currentIndex ? this.textHighlightSize : this.textSize)
-    //                         .maxLines(index == this.currentIndex ? undefined : 2) // 未高亮时限制行数
-    //                         .opacity(this.calculateOpacityFactor(index, this.currentIndex))
-    //                         .blur(this.calculateBlurFactor(index, this.currentIndex))
-    //                         .textAlign(this.alignMode == 'center' ? TextAlign.Center : TextAlign.Start)
-    //                         .fontColor(index == this.currentIndex ? this.textHighlightColor : this.textColor)
-    //                         .fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold : FontWeight.Medium)
-    //                         .animation({ duration: this.animDuration, curve: Curve.FastOutSlowIn })
-    //
-    //                     // if (this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
-    //                     //     && this.enableSeek && this.isUserTouching) {
-    //                         Text(this.scrollDurationText)
-    //                             .fontSize(this.textSize)
-    //                             .fontColor(this.seekUIColor)
-    //                             .margin({right:22})
-    //                             .visibility(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
-    //                                 && this.enableSeek && this.isUserTouching?Visibility.Visible:Visibility.Hidden)
-    //
-    //                     // }
-    //                 }
-    //                 .align(Alignment.End)
-    //             }
-    //             .padding(8)
-    //             // .margin({right:20})
-    //             .border({ radius: 4 })
-    //             .backgroundColor(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
-    //                 && this.enableSeek && this.isUserTouching ? '#80a9a9a9' : '#00000000')
-    //             .onClick(() => {
-    //                 if (this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0) {
-    //                     if (this.seekIndex != -1 && this.seekIndex != this.currentIndex) {
-    //                         this.handleSeekAction();
-    //                     }
-    //                 }
-    //             })
-    //         },
-    //             (item: LyricLine, index: number) => {
-    //                 return item.text + '_' + index + '_' + item.beginTime + '_' + item.nextTime
-    //             })
-    //     }
-    //     .width('100%')
-    //     .height('100%')
-    //     .scrollBar(BarState.Off)
-    //     .cachedCount(this.cacheSize)
-    //     .visibility(this.isLoadingData ? Visibility.Hidden : Visibility.Visible)
-    //     .onScrollIndex((_, __, center) => {
-    //         if (this.isUserTouching) {
-    //             if (center >= 0 && center < this.listAdapter.totalCount()) {
-    //                 this.seekIndex = center;
-    //                 let targetPosition = this.listAdapter.getData(center).beginTime;
-    //                 this.scrollDurationText = duration2text(targetPosition);
-    //             } else {
-    //                 console.error(`Index out of range: ${center}`);
-    //             }
-    //         }
-    //     })
-    //     .onTouch((event) => {
-    //         let motion = event.touches[0];
-    //         switch (motion.type) {
-    //             case TouchType.Down:
-    //                 clearTimeout(this.seekUiHideTimeout);
-    //                 break;
-    //             case TouchType.Move:
-    //                 this.isUserTouching = true;
-    //                 break;
-    //             case TouchType.Up:
-    //             case TouchType.Cancel:
-    //                 this.seekUiHideTimeout = setTimeout(() => {
-    //                     this.seekIndex = -1;
-    //                     this.isUserTouching = false;
-    //                     this.animateToIndex(this.currentIndex);
-    //                 }, this.autoHideSeekUIDuration);
-    //         }
-    //     })
-    // }
 
     // 优化建议代码示例:增加滚动节流
     private lastScrollTime: number = 0
@@ -268,10 +192,12 @@ export struct LyricView2 {
                                 centerX: this.alignMode == 'center' ? '50%' : 0
                             })
                             .fontColor(index == this.currentIndex ? this.textHighlightColor : this.textColor)
+                            // .fontWeight(this.textWeight)
                             .fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold :
-                            FontWeight.Medium)// .padding({
+                            this.textWeight)
+                                // .padding({
                             .animation({ duration: this.animDuration, curve: Curve.FastOutSlowIn })
-                            .width(this.alignMode == 'center'?'100%':'80%')
+                            .width(this.alignMode == 'center'?'100%':'76%')
 
                         // if (this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
                         //     && this.enableSeek && this.isUserTouching) {
@@ -453,12 +379,18 @@ export struct LyricView2 {
         if (this.isUserTouching) {
             return
         }
-        // 计算目标索引,使其在居中位置上方有两条歌词
-        // const targetIndex = Math.max(0, index - 3);
-        // this.scroller.scrollToIndex(targetIndex, true, ScrollAlign.START);
-        this.scroller.scrollToIndex(index, true, ScrollAlign.CENTER)
+        if(this.isHightLightCenter){
+            this.scroller.scrollToIndex(index, true, ScrollAlign.CENTER)
+        }else{
+            // 计算目标索引,使其在居中位置上方有两条歌词
+            const targetIndex = Math.max(0, index - 2);
+            this.scroller.scrollToIndex(targetIndex, true, ScrollAlign.START);
+        }
+
+
     }
 
+
     private onPositionChanged(mediaPosition: number) {
         if (this.isLyricEmpty) {
             printW('The lyric data is empty!')