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

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

Composable สำหรับจัดการส่วนที่เว้นไว้

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

แถบแอป

  • TopAppBar / SmallTopAppBar / 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 ที่ส่งไปยัง Composable เพื่อกำหนดค่าลักษณะการทำงานของ Composable ได้ พารามิเตอร์นี้อาจเป็นระยะขอบหน้าต่างประเภทอื่นที่จะใช้แทน หรือปิดใช้โดยส่งอินสแตนซ์ว่าง WindowInsets(0, 0, 0, 0)

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

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

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