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

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

Composable สำหรับการจัดการ Inset

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

แถบแอป

  • TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: ใช้ด้านบนและแนวนอนของ แถบระบบเป็นระยะห่างจากขอบเนื่องจากใช้ที่ด้านบนของหน้าต่าง
  • 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)

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

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

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