Jetpack Compose學(xué)習(xí)(7)——MD樣式架構(gòu)組件Scaffold及導(dǎo)航底部菜單 | Stars-One的雜貨小窩

Compose給我們提供了一個(gè)Material Design樣式的首頁組件(Scaffold),我們可以直接套用從而完成一個(gè)APP的首頁界面

本系列以往文章請查看此分類鏈接Jetpack compose學(xué)習(xí)

由于Scaffold中還包含有其他的組件,所以講解Scaffold先講解前置的一些組件

TopAppBar

首先,便是TopAppBar,其本質(zhì)就是我們Android原生常見的Toolbar,不過其封裝的比較好,可以快速構(gòu)建,下面是其的參數(shù)列表

TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
) 

title 標(biāo)題,接收Compose組件,可以傳個(gè)Text文本進(jìn)去
modifier 修飾符,詳情見上一章節(jié)
navigationIcon 導(dǎo)航圖標(biāo)
actions 動(dòng)作組件
backgroundColor 背景色
contentColor 內(nèi)容顏色
elevation 陰影

可能說的那么明確,我們直接上代碼和效果圖,各位就清晰了

TopAppBar(
    navigationIcon = {
        IconButton(
            onClick = {}
        ) {
            Icon(Icons.Filled.Menu, null)
        }
    },
    title = {
        Text("stars-one的測試應(yīng)用")
    },actions = {
        IconButton(
            onClick = {}
        ) {
            Icon(Icons.Filled.Share, null)
        }
        IconButton(
            onClick = {}
        ) {
            Icon(Icons.Filled.Settings, null)
        }
    }
)

效果圖如下

FloatingActionButton

比較常見的懸浮按鈕,一般里面是個(gè)簡單的按鈕,參數(shù)與之前的Button一樣,詳情請參考Jetpack Compose學(xué)習(xí)(3)——圖標(biāo)(Icon) 按鈕(Button) 輸入框(TextField) 的使用 | Stars-One的雜貨小窩

FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
)

使用:

FloatingActionButton(onClick = { /*TODO*/ }) {
    Icon(imageVector = Icons.Default.Add, contentDescription = null)
}

PS: 一般這個(gè)與Scaffold連用,Scaffold里面可控制FloatingActionButton的位置

除此之外,還有個(gè)ExtendedFloatingActionButton,這種就是可以帶圖標(biāo)和文字的,如下圖

ExtendedFloatingActionButton(
    icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
    text = { Text("ADD TO BASKET") },
    onClick = { /*do something*/ }
)

ExtendedFloatingActionButton和FloatingActionButton區(qū)別是,ExtendedFloatingActionButton是以文字為主,圖標(biāo)是可選的,而FloatingActionButton只顯示圖標(biāo)

BottomAppBar

這個(gè)與之前的TopAppBar參數(shù)有所不同,從名字看我們知道其實(shí)放在底部的一個(gè)Toolbar,但是其本身是不帶有位置控制,也是得與Scaffold連用,如果單獨(dú)使用,效果也是會(huì)和TopAppBar的一樣放在頁面的頂頭

BottomAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    cutoutShape: Shape? = null,
    elevation: Dp = AppBarDefaults.BottomAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

可以把這個(gè)布局看作是個(gè)Row布局,里面的參數(shù)從名字都能看到出來,設(shè)置背景色或者設(shè)置padding邊距的,這里不再贅述

唯一值得注意的是cutoutShape屬性,如果在Scaffold中,有BottomAppBar和FloatingActionButton,可以實(shí)現(xiàn)下面的效果

BottomNavigation

BottomNavigation里面會(huì)有N個(gè)BottomNavigationItem,這里就看你自己準(zhǔn)備定義多少個(gè)菜單項(xiàng)了

BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit
) 

BottomNavigation提供的一些參數(shù)也就是改變顏色或者陰影,重點(diǎn)是在BottomNavigationItem

BottomNavigationItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: @Composable (() -> Unit)? = null,
    alwaysShowLabel: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    selectedContentColor: Color = LocalContentColor.current,
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)
) 

BottomNavigationItem有個(gè)selected參數(shù),表示是否選中

icon則是圖標(biāo)的設(shè)置,label則是文字,這兩個(gè)都是需要接收一個(gè)組件的

selectedContentColor 選中顏色
unselectedContentColor 未選中顏色

下面直接來個(gè)例子講解

var selectIndex by remember {
    mutableStateOf(0)
}
val navList = listOf("首頁","發(fā)現(xiàn)","我的")
BottomNavigation() {
    navList.forEachIndexed { index, str ->
        BottomNavigationItem(
            selected = index == selectIndex, onClick = { selectIndex = index },
            icon = {
                Icon(imageVector = Icons.Default.Favorite, contentDescription =null )
            },label = {Text(str)}
        )
    }
}

Text(text = "這是${navList[selectIndex]}")

效果如下所示

Scaffold

Scaffold(
    modifier: Modifier = Modifier,
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    isFloatingActionButtonDocked: Boolean = false,
    drawerContent: @Composable (ColumnScope.() -> Unit)? = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: @Composable (PaddingValues) -> Unit
)

屬性說明

topBar 頂部的布局
bottomBar 底部的布局
floatingActionButton 懸浮按鈕布局
floatingActionButtonPosition 懸浮按鈕位置,有FabPosition.End(默認(rèn))和FabPosition.Center可選
isFloatingActionButtonDocked 與BottomAppBar配合使用,可以實(shí)現(xiàn)底部導(dǎo)航條的裁剪效果,效果可以看下圖
drawerGesturesEnabled 是否開啟側(cè)邊抽屜手勢(開啟后可側(cè)滑彈出抽屜)
drawerShape 抽屜的形狀
drawerContent 側(cè)邊抽屜內(nèi)容,是個(gè)Column布局,自己可以順便排列
drawerElevation 側(cè)邊抽屜的陰影
drawerBackgroundColor 側(cè)邊抽屜的背景色
drawerContentColor 側(cè)邊抽屜內(nèi)容顏色(似乎是覆蓋字體顏色而已)
drawerScrimColor 側(cè)邊抽屜遮蓋最底層的顏色

基本使用

使用5個(gè)屬性topBar bottomBar floatingActionButton floatingActionButtonPosition isFloatingActionButtonDocked,實(shí)現(xiàn)個(gè)簡單架構(gòu)效果

Scaffold(
    topBar = {
        TopAppBar(
            navigationIcon = {
                IconButton(
                    onClick = {}
                ) {
                    Icon(Icons.Filled.Menu, null)
                }
            },
            title = {
                Text("stars-one的測試應(yīng)用")
            },actions = {
                IconButton(
                    onClick = {}
                ) {
                    Icon(Icons.Filled.Share, null)
                }
                IconButton(
                    onClick = {}
                ) {
                    Icon(Icons.Filled.Settings, null)
                }
            }
        )
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Default.Favorite, contentDescription = null)
        }
    },
    bottomBar = {
        
        BottomAppBar(cutoutShape = CircleShape) {

        }
    },
    //注意此參數(shù),可以實(shí)現(xiàn)圖中那種被裁剪的效果,前提是上面的cutoutShape也有設(shè)置
    isFloatingActionButtonDocked = true,
    floatingActionButtonPosition = FabPosition.End

) {
    //這里是主界面
    Text("我是要展示的內(nèi)容")
}

效果如下圖所示

底部導(dǎo)航條

我們在上面的基礎(chǔ)改下即可(主要是bottomAppBar這個(gè)參數(shù)),代碼如下所示

//當(dāng)前選擇的NavItem
var selectIndex by remember { mutableStateOf(0) }
val navTextList = listOf("主頁", "發(fā)現(xiàn)", "我的")
//圖標(biāo)
val iconList = listOf(Icons.Default.Home,Icons.Default.Favorite,Icons.Default.AccountBox)
Scaffold(
    topBar = {
        TopAppBar(
            navigationIcon = {
                IconButton(
                    onClick = {}
                ) {
                    Icon(Icons.Filled.Menu, null)
                }
            },
            title = {
                Text("stars-one的測試應(yīng)用")
            },actions = {
                IconButton(
                    onClick = {}
                ) {
                    Icon(Icons.Filled.Share, null)
                }
                IconButton(
                    onClick = {}
                ) {
                    Icon(Icons.Filled.Settings, null)
                }
            }
        )
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Default.Add, contentDescription = null)
        }
    },
    bottomBar = {

        BottomNavigation() {
            navTextList.forEachIndexed { index, str ->
                BottomNavigationItem(label = {Text(str)},selected = index==selectIndex , onClick = {selectIndex = index },icon = {
                    Icon(imageVector = iconList[index], contentDescription = null)
                })
            }
        }
    },
    //注意此參數(shù),可以實(shí)現(xiàn)圖中那種被裁剪的效果,前提是上面的cutoutShape也有設(shè)置
    floatingActionButtonPosition = FabPosition.End

) {
    //這里是主界面
    //根據(jù)底部導(dǎo)航選中的下標(biāo)改變展示的頁面
    when(selectIndex){
        0 -> Text("這是首頁")
        1 -> Text("這是發(fā)現(xiàn)")
        2 -> Text("這是我的")
    }

}

效果如下圖所示

帶側(cè)邊抽屜

這里需要注意的是,彈出側(cè)邊抽屜是個(gè)掛起操作(suspend),所以需要使用到Kotlin中的協(xié)程,不過不是涉及太深,我們先知道怎么用即可,后面有空我再補(bǔ)充協(xié)程的用法

這里主要是測試了帶drawer開頭的那幾個(gè)參數(shù),及點(diǎn)擊左上角的菜單按鈕彈出側(cè)邊抽屜功能(即對應(yīng)的點(diǎn)擊事件)

//狀態(tài)
val scaffoldState = rememberScaffoldState()
//協(xié)程的作用域
val scope = rememberCoroutineScope()
//當(dāng)前選擇的NavItem
var selectIndex by remember { mutableStateOf(0) }
val navTextList = listOf("主頁", "發(fā)現(xiàn)", "我的")
//圖標(biāo)
val iconList =
    listOf(Icons.Default.Home, Icons.Default.Favorite, Icons.Default.AccountBox)
Scaffold(
    scaffoldState = scaffoldState,
    topBar = {
        TopAppBar(
            navigationIcon = {
                IconButton(
                    onClick = {
                        //使用協(xié)程
                        scope.launch {
                            //改變狀態(tài),顯示drawer抽屜
                            scaffoldState.drawerState.open()
                        }
                    }
                ) {
                    Icon(Icons.Filled.Menu, null)
                }
            },
            title = {
                Text("stars-one的測試應(yīng)用")
            }, actions = {
                IconButton(
                    onClick = {}
                ) {
                    Icon(Icons.Filled.Share, null)
                }
                IconButton(
                    onClick = {}
                ) {
                    Icon(Icons.Filled.Settings, null)
                }
            }
        )
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Default.Add, contentDescription = null)
        }
    },
    bottomBar = {

        BottomNavigation() {
            navTextList.forEachIndexed { index, str ->
                BottomNavigationItem(
                    label = { Text(str) },
                    selected = index == selectIndex,
                    onClick = { selectIndex = index },
                    icon = {
                        Icon(
                            imageVector = iconList[index],
                            contentDescription = null
                        )
                    })
            }
        }
    },
    //注意此參數(shù),可以實(shí)現(xiàn)圖中那種被裁剪的效果,前提是上面的cutoutShape也有設(shè)置
    floatingActionButtonPosition = FabPosition.End,
    drawerContent = {
        Text("這是抽屜的內(nèi)容")
    },
    
    drawerContentColor = Color.Black,
    drawerBackgroundColor = Color.Green,
    drawerGesturesEnabled = true,
    drawerScrimColor = Color.Red,
    drawerShape = RoundedCornerShape(20.dp)

) {
    //這里是主界面
    //根據(jù)底部導(dǎo)航選中的下標(biāo)改變展示的頁面
    when (selectIndex) {
        0 -> Text("這是首頁")
        1 -> Text("這是發(fā)現(xiàn)")
        2 -> Text("這是我的")
    }

}

參考

Scaffold - Jetpack Compose
TopAppBar - Jetpack Compose
BottomAppBar官方文檔

---

提問之前，請先看提問須知
點(diǎn)擊右側(cè)圖標(biāo)發(fā)起提問

或者加入QQ群一起學(xué)習(xí)

TornadoFx學(xué)習(xí)交流群:1071184701


<!---->

總結(jié)

以上是生活随笔為你收集整理的Jetpack Compose学习(7)——MD样式架构组件Scaffold及导航底部菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。