99. [HarmonyOS NEXT 实战案例：音乐播放器] 基础篇 - 水平分割布局打造音乐播放器界面

@Component
export struct MusicPlayerExample {
    @State isPlaying: boolean = false
    @State currentTime: number = 0
    @State totalTime: number = 240 // 4分钟

    build() {
        // 组件内容
    }
}

Column() {
    Text('音乐播放器布局')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 10 })

    RowSplit() {
        // RowSplit内容
    }
    .height(400)
}
.padding(15)

RowSplit() {
    // 专辑封面区域
    Column() {
        // 专辑封面区域内容
    }
    .height('60%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#f8f9fa')

    // 播放控制区域
    Column() {
        // 播放控制区域内容
    }
    .padding(10)
}
.height(400)

Column() {
    Image($r('app.media.big29'))
        .width(200)
        .height(200)
        .borderRadius(10)
        .margin({ top: 20 })
    Text('夏日记忆')
        .fontSize(18)
        .margin({ top: 10 })
    Text('林小夏')
        .fontSize(16)
        .margin({ top: 5 })
        .fontColor('#666')

    // 喜欢和分享按钮
    Row() {
        Button($r('app.media.01'))
            .width(24)
            .height(24)
            .backgroundColor(Color.Transparent)
        Button($r('app.media.02'))
            .width(24)
            .height(24)
            .backgroundColor(Color.Transparent)
            .margin({ left: 20 })
    }
    .margin({ top: 15 })
}
.height('60%')
.justifyContent(FlexAlign.Center)
.backgroundColor('#f8f9fa')

Column() {
    // 进度条
    Row() {
        Text(this.formatTime(this.currentTime))
            .fontSize(14)
            .width(50)
        Slider({
            value: this.currentTime,
            min: 0,
            max: this.totalTime,
            style: SliderStyle.OutSet
        })
            .onChange((value: number) => {
                this.currentTime = value
            })
            .width('70%')
        Text(this.formatTime(this.totalTime))
            .fontSize(14)
            .width(50)
    }
    .width('90%')
    .margin({ top: 20, bottom: 10 })

    // 播放控制按钮
    Row() {
        Button($r('app.media.03'))
            .width(32)
            .height(32)
            .backgroundColor(Color.Transparent)
        Button(this.isPlaying ? $r('app.media.04') : $r('app.media.05'))
            .width(40)
            .height(40)
            .backgroundColor(Color.Transparent)
            .margin({ left: 20, right: 20 })
            .onClick(() => {
                this.isPlaying = !this.isPlaying
            })
        Button($r('app.media.01'))
            .width(32)
            .height(32)
            .backgroundColor(Color.Transparent)
    }
    .margin({ top: 10 })

    // 音量和其他控制
    Row() {
        Button($r('app.media.02'))
            .width(24)
            .height(24)
            .backgroundColor(Color.Transparent)
        Slider({
            value: 80,
            min: 0,
            max: 100,
            style: SliderStyle.OutSet
        })
            .width(100)
            .margin({ left: 10 })
        Button($r('app.media.03'))
            .width(24)
            .height(24)
            .backgroundColor(Color.Transparent)
            .margin({ left: 15 })
    }
    .margin({ top: 20 })
}
.padding(10)

private formatTime(seconds: number): string {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins}:${secs < 10 ? '0' + secs : secs}`
}