Material3 Compose

media3-ui-compose-material3 ไลบรารีจะจัดการทั้งการจัดการสถานะและ การจัดรูปแบบ Material3 ภายใน ดูข้อมูลเพิ่มเติมเกี่ยวกับไลบรารีที่จะใช้ได้ที่ภาพรวมของ Media3 Compose

// The library provides styled UI components
Row {
  SeekBackButton(player)
  PlayPauseButton(player)
  SeekForwardButton(player)
}
ComposeMaterial3Snippets.kt

// You can rearrange the composables into a layout that suits your needs
@Composable
fun PlayerProgressControlsLeftAligned(player: Player) {
  Row {
    PositionAndDurationText(player)
    ProgressSlider(player)
  }
}

@Composable
fun PlayerProgressControlsCenterAligned(player: Player) {
  Row {
    PositionText(player)
    ProgressSlider(player)
    DurationText(player)
  }
}
ComposeMaterial3Snippets.kt

ปรับแต่งคอมโพเนนต์ Material3

แม้ว่า media3-ui-compose-material3 จะมีคอมโพเนนต์ที่ใช้ Material3 Design แต่คุณก็ยังคงควบคุมการกำหนดธีมได้อย่างเต็มที่ คุณปรับแต่งสี การพิมพ์ และรูปร่างได้โดยการรวม UI ของเพลเยอร์ไว้ใน MaterialTheme

เช่น หากต้องการเปลี่ยนสีของ PlayPauseButton คุณสามารถระบุcolorSchemeที่กำหนดเองได้ดังนี้

MaterialTheme(
  colorScheme =
    lightColorScheme(
      primary = Color.Red, // Change the primary color for the button
      onPrimary = Color.White,
    )
) {
  // The PlayPauseButton will now use the custom colors
  PlayPauseButton(player)
}
ComposeMaterial3Snippets.kt

คอมโพเนนต์ Material3 ที่พร้อมใช้งาน

media3-ui-compose-material3 ไลบรารีมี Composable ที่สร้างไว้ล่วงหน้าสำหรับตัวควบคุมเพลเยอร์ทั่วไป ตัวอย่างคอมโพเนนต์ที่คุณใช้ได้โดยตรงในแอปมีดังนี้

โปรดทราบว่ายังมีกรณีอื่นๆ นอกเหนือจากนี้ โปรดดูเอกสารอ้างอิง API ของไลบรารีสำหรับคอมโพเนนต์ทั้งหมด ที่มี

Composable ที่สร้างไว้ล่วงหน้าอีก 2 รายการที่คุณน่าจะต้องใช้เกี่ยวข้องกับการจัดการพื้นผิว และอยู่ในโมดูล media3-ui-compose เนื่องจากไม่มีธีม Material