สร้างการนำทางแบบปรับอัตโนมัติ

แอปส่วนใหญ่มีปลายทางระดับบนสุดไม่กี่แห่งที่เข้าถึงได้ผ่าน UI การไปยังส่วนต่างๆ หลักของแอป ในหน้าต่างขนาดกะทัดรัด เช่น โทรศัพท์มาตรฐาน ปลายทางก็จะแสดงในแถบนำทางที่ ด้านล่างของหน้าต่าง ในหน้าต่างที่ขยาย เช่น แอปแบบเต็มหน้าจอบน แท็บเล็ต แถบนำทางที่วางควบคู่ไปกับแอป จึงเป็นตัวเลือกที่ดีกว่าเนื่องจาก เข้าถึงการควบคุมการนำทางได้ง่ายขึ้นเมื่อแตะฝั่งซ้ายและขวาค้างไว้ ของอุปกรณ์

NavigationSuiteScaffold ช่วยให้การเปลี่ยนอุปกรณ์ง่ายขึ้น ระหว่าง UI การนำทางด้วยการแสดง UI การนำทางที่เหมาะสม Composable จาก WindowSizeClass ซึ่งรวมถึงแบบไดนามิก การเปลี่ยน UI ระหว่างการเปลี่ยนขนาดหน้าต่างรันไทม์ ลักษณะการทำงานเริ่มต้นคือการ แสดงคอมโพเนนต์ UI อย่างใดอย่างหนึ่งต่อไปนี้

  • แถบนำทาง หากความกว้างหรือความสูงมีขนาดกะทัดรัด หรือหากอุปกรณ์อยู่ใน ท่าตั้งโต๊ะ
  • ระบบนำทางสำหรับสิ่งอื่นๆ ที่เหลือ
รูปที่ 1 NavigationSuiteScaffold แสดงแถบนำทางในหน้าต่างขนาดกะทัดรัด
รูปที่ 2 NavigationSuiteScaffold แสดงแถบนำทางในหน้าต่างที่ขยาย

เพิ่มทรัพยากร Dependency

NavigationSuiteScaffold เป็นส่วนหนึ่งของ ชุดการนำทางแบบปรับอัตโนมัติของ Material3 ไลบรารี เพิ่มทรัพยากร Dependency สำหรับไลบรารีในไฟล์ build.gradle ของแอป หรือโมดูล:

Kotlin


implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

ดึงดูด


implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'

สร้างนั่งร้าน

2 ส่วนหลักของ NavigationSuiteScaffold คือรายการชุดการนำทาง และเนื้อหาสำหรับปลายทางที่เลือก คุณสามารถระบุ รายการชุดการนำทางใน Composable แต่เป็นเรื่องปกติที่จะมีการกำหนดรายการเหล่านี้ ที่อื่น เช่น ใน enum

enum class AppDestinations(
    @StringRes val label: Int,
    val icon: ImageVector,
    @StringRes val contentDescription: Int
) {
    HOME(R.string.home, Icons.Default.Home, R.string.home),
    FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites),
    SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping),
    PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile),
}
SampleNavigationSuiteScaffold.kt

หากต้องการใช้ NavigationSuiteScaffold คุณต้องติดตามปลายทางปัจจุบัน ซึ่ง คุณสามารถทำได้โดยใช้ rememberSaveable:

var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
SampleNavigationSuiteScaffold.kt

ในตัวอย่างต่อไปนี้ พารามิเตอร์ navigationSuiteItems (ประเภท NavigationSuiteScope จะใช้ฟังก์ชัน item เพื่อกำหนด UI การนำทางสำหรับปลายทางแต่ละแห่ง UI ปลายทางคือ ใช้ในแถบนำทาง แถบ และลิ้นชัก หากต้องการสร้างรายการนำทาง คุณต้อง วนซ้ำ AppDestinations ของคุณ (ตามที่กำหนดไว้ในข้อมูลโค้ดก่อนหน้า):

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it }
            )
        }
    }
) {
    // TODO: Destination content.
}
SampleNavigationSuiteScaffold.kt

ภายใน lambda ของเนื้อหาปลายทาง ให้ใช้ค่า currentDestination เพื่อ กำหนดว่าจะแสดง UI ใด หากใช้ไลบรารีการนำทางในแอป ให้ใช้ไลบรารีนี้ ที่นี่เพื่อแสดงปลายทางที่เหมาะสม เงื่อนไขว่าเมื่อใดควรเพียงพอ ดังนี้

NavigationSuiteScaffold(
    navigationSuiteItems = { /*...*/ }
) {
    // Destination content.
    when (currentDestination) {
        AppDestinations.HOME -> HomeDestination()
        AppDestinations.FAVORITES -> FavoritesDestination()
        AppDestinations.SHOPPING -> ShoppingDestination()
        AppDestinations.PROFILE -> ProfileDestination()
    }
}
SampleNavigationSuiteScaffold.kt

เปลี่ยนสี

NavigationSuiteScaffold สร้าง Surface ทั่วทั้งพื้นที่ นั่งร้านมักจะกินพื้นที่หน้าต่างเต็ม นอกจากนี้ นั่งร้าน วาด UI การไปยังส่วนต่างๆ โดยเฉพาะ เช่น NavigationBar ทั้งพื้นผิวและ UI การนำทางใช้ค่าที่ระบุไว้ใน ธีมใหม่ แต่คุณสามารถลบล้างค่าของธีมได้

พารามิเตอร์ containerColor จะระบุสีของพื้นผิว ค่าเริ่มต้น คือสีพื้นหลังของรูปแบบสีของคุณ พารามิเตอร์ contentColor ระบุสีของเนื้อหาบนพื้นผิวนั้น ค่าเริ่มต้นคือ "on" สี ของค่าใดๆ ที่ระบุไว้สำหรับ containerColor ตัวอย่างเช่น หาก containerColor ใช้สี background จากนั้น contentColor จะใช้สี onBackground ดูธีมดีไซน์ Material 3 ใน Compose เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของระบบสี เมื่อลบล้างค่าเหล่านี้ ใช้ค่าที่กำหนดไว้ในธีมเพื่อให้แอปรองรับการแสดงผลแบบมืดและสว่าง โหมด:

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    containerColor = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.onPrimary,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

UI การนำทางถูกวาดไว้ที่ด้านหน้าของพื้นผิว NavigationSuiteScaffold ค่าเริ่มต้นสำหรับสี UI มาจาก NavigationSuiteDefaults.colors() แต่คุณ สามารถลบล้างค่าเหล่านี้ได้ด้วย เช่น ถ้าต้องการพื้นหลังของ แถบนำทางให้โปร่งใส แต่ค่าอื่นๆ กลับเป็นค่าเริ่มต้น ลบล้าง navigationBarContainerColor:

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    navigationSuiteColors = NavigationSuiteDefaults.colors(
        navigationBarContainerColor = Color.Transparent,
    )
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

สุดท้ายนี้คุณปรับแต่งแต่ละรายการได้ใน UI การนำทาง เมื่อเรียกใช้เมธอด item คุณสามารถส่งต่อในอินสแตนซ์ NavigationSuiteItemColors คลาสจะระบุ สีของรายการต่างๆ ในแถบนำทาง แถบนำทาง และการนำทาง ลิ้นชัก ซึ่งหมายความว่าคุณสามารถมีสีที่เหมือนกันใน UI การไปยังส่วนต่างๆ แต่ละประเภทได้ หรือคุณสามารถเลือกสีที่แตกต่างกันตามความต้องการของคุณ กําหนดสีที่ ระดับ NavigationSuiteScaffold เพื่อใช้อินสแตนซ์ของออบเจ็กต์เดียวกันสำหรับรายการทั้งหมดได้ และเรียกฟังก์ชัน NavigationSuiteDefaults.itemColors() เพื่อลบล้างเท่านั้น รายการที่ต้องการเปลี่ยนแปลง:

val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors(
    navigationBarItemColors = NavigationBarItemDefaults.colors(
        indicatorColor = MaterialTheme.colorScheme.primaryContainer,
        selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer
    ),
)

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it },
                colors = myNavigationSuiteItemColors,
            )
        }
    },
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

ปรับแต่งประเภทการนำทาง

ลักษณะการทำงานเริ่มต้นของ NavigationSuiteScaffold จะเปลี่ยน UI การไปยังส่วนต่างๆ ตามขนาดหน้าต่าง ชั้นเรียน อย่างไรก็ตาม คุณ คุณอาจต้องลบล้างลักษณะการทำงานนี้ ตัวอย่างเช่น ถ้าแอปของคุณแสดงรายการเดียว หน้าต่างเนื้อหาขนาดใหญ่สำหรับฟีด แอปอาจใช้การนำทางแบบถาวรได้ ลิ้นชักสำหรับหน้าต่างที่ขยายแล้ว แต่ยังคงกลับไปใช้ลักษณะการทำงานเริ่มต้นของ คลาสขนาดกะทัดรัดและขนาดกลาง:

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    layoutType = customNavSuiteType,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

แหล่งข้อมูลเพิ่มเติม

ดูคำแนะนำเกี่ยวกับดีไซน์ Material

ดูคอมโพเนนต์ไลบรารี androidx.compose.material3 รายการต่อไปนี้

ก่อนหน้า
支持多窗口模式
ถัดไป
构建列表详情布局