ใช้ส่วนแทรกของ Material 3

คอมโพเนนต์ของ Material 3 (androidx.compose.material3) ที่มีให้ใช้งานในตัวหลายรายการจะจัดการระยะขอบเองโดยอิงตามวิธีวางคอมโพเนนต์ในแอป ตามข้อกำหนดของ Material

คอมโพเนนต์ที่จัดการส่วนที่เว้นไว้

รายการต่อไปนี้คือรายการคอมโพเนนต์ของ Material ที่ จัดการระยะขอบโดยอัตโนมัติ

แถบแอป

  • TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: ใช้ด้าน บน และด้าน แนวนอน ของแถบระบบเป็น Padding เนื่องจากใช้ที่ด้านบนของหน้าต่าง
  • BottomAppBar: ใช้ด้าน ล่าง และด้าน แนวนอน ของแถบระบบเป็น Padding

คอนเทนเนอร์เนื้อหา

  • ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (เนื้อหาภายในลิ้นชักการนำทางแบบโมดัล): ใช้ระยะขอบ แนวตั้ง และระยะขอบ เริ่มต้น กับเนื้อหา
  • ModalBottomSheet: ใช้ระยะขอบ ด้านล่าง
  • NavigationBar : ใช้ระยะขอบ ด้านล่าง และระยะขอบ แนวนอน
  • NavigationRail: ใช้ระยะขอบ แนวตั้ง และระยะขอบ เริ่มต้น

Scaffold

โดยค่าเริ่มต้น Scaffold จะให้ระยะขอบเป็นพารามิเตอร์ PaddingValues เพื่อให้คุณใช้ได้ Scaffold จะไม่ใช้ระยะขอบกับเนื้อหา คุณต้องเป็นผู้รับผิดชอบในส่วนนี้ ตัวอย่างเช่น หากต้องการใช้ระยะขอบเหล่านี้กับ LazyColumn ภายใน Scaffold ให้ทำดังนี้

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        // ..
    }
}

วิดีโอต่อไปนี้แสดง LazyColumn ภายใน Scaffold โดยปิดใช้และเปิดใช้การแสดงผลแบบขอบจรดขอบ

โดยทั่วไป การใช้พารามิเตอร์ PaddingValues ใน Scaffold ก็เพียงพอที่จะกำหนดระยะขอบ UI ออกจาก UI ของระบบและส่วนที่ถูกตัดออกของจอแสดงผล หลีกเลี่ยงการใช้แนวทางการจัดการส่วนที่เว้นไว้เพิ่มเติม เช่น ไม้บรรทัด ตัวปรับแต่งระยะห่างจากขอบ หรือตัวปรับแต่งขนาดส่วนที่เว้นไว้ หากใช้ Scaffold เพื่อหลีกเลี่ยงการใช้ระยะห่างจากขอบกับ UI มากเกินไป

ลบล้างระยะขอบเริ่มต้น

คุณสามารถเปลี่ยนพารามิเตอร์ windowInsets ที่ส่งไปยังคอมโพเนนต์เพื่อกำหนดค่าลักษณะการทำงานของคอมโพเนนต์ได้ พารามิเตอร์นี้อาจเป็นระยะขอบหน้าต่างประเภทอื่นที่จะใช้แทน หรือปิดใช้โดยส่งอินสแตนซ์ว่าง WindowInsets(0, 0, 0, 0)

ตัวอย่างเช่น หากต้องการปิดใช้การจัดการส่วนที่เว้นไว้ใน LargeTopAppBar, ให้ตั้งค่าพารามิเตอร์ windowInsets เป็นอินสแตนซ์ว่างดังนี้

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)

ก่อนหน้า
ใช้ภาพเคลื่อนไหวของ IME บนแป้นพิมพ์
ถัดไป
ใช้ส่วนตัดในมุมมองและเขียน