JetpackCompose?Scaffold組件如何使用

本文小編為大家詳細介紹“JetpackCompose Scaffold組件如何使用”，內容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“JetpackCompose Scaffold組件如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

搭設基本Scaffold頁面

scaffold 組件遵循 Material Design，可以協(xié)助開發(fā)者迅速構建對應框架頁面

準備工作

首先在 drawable 文件夾內，添加幾張 vector images，用作我們的底部導航欄圖標

在主頁面中聲明數(shù)據(jù)類，表示單個圖標以及其解釋文本

data class Item(
    val name: String,
    val icon: Int
)

新增組件 mainBody，逐一添加三個底部按鈕的圖標

@Composable
fun mainBody() {
    // 存儲當前選中的底部按鈕的狀態(tài)
    var selectedItem by remember {
        mutableStateOf(0)
    }
    // 三個底部按鈕
    val items = listOf(
        Item("主頁", R.drawable.home),
        Item("列表", R.drawable.list),
        Item("設置", R.drawable.setting)
    )
    ...
}

主體編寫

首先是設置 topBar，即頂部導航欄對應按鈕

代碼很簡單，但要注意使用的括號類型以及對應嵌套關系！

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("主頁") },
            navigationIcon = {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(Icons.Filled.Menu, null)
                }
            }
        )
    },
    ...
){}

緊接著在 topBar 屬性后面寫底部導航欄屬性 bottomBar

items.forEachIndexed 按照索引渲染，vue 的 v-for 懂吧，就這個原理！

依次渲染 BottomNavigationItem 即可；

bottomBar = {
    BottomNavigation {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                // selectedItem 是內置屬性，表示當前選中的Item
                // onClick即切換當前激活的Item
                selected = selectedItem == index,
                onClick = { selectedItem = index },
                // 這幾個屬性看看英文就懂了，不解釋
                icon = { Icon(painterResource(item.icon), null) },
                alwaysShowLabel = false,
                label = { Text(item.name) }
            )
        }
    }
}

這是總體的代碼：

@Composable
fun mainBody() {
    var selectedItem by remember {
        mutableStateOf(0)
    }
    val items = listOf(
        Item("主頁", R.drawable.home),
        Item("列表", R.drawable.list),
        Item("設置", R.drawable.setting)
    )
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("主頁") },
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(Icons.Filled.Menu, null)
                    }
                }
            )
        },
        bottomBar = {
            BottomNavigation {
                items.forEachIndexed { index, item ->
                    BottomNavigationItem(
                        selected = selectedItem == index,
                        onClick = { selectedItem = index },
                        icon = { Icon(painterResource(item.icon), null) },
                        alwaysShowLabel = false,
                        label = { Text(item.name) }
                    )
                }
            }
        }
    ) {
        // 在scaffold里面塞一個box，糊弄一下
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "主頁界面")
        }
    }
}

讀到這里，這篇“JetpackCompose Scaffold組件如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業(yè)資訊頻道。