Jetpack：015-Jetpack的是脚手架

news2024/12/19 3:59:36

文章目录

1. 概念介绍
2. 使用方法
- 2.1 核心思想
- 2.2 具体内容
3. 示例代码
4. 内容总结

我们在上一章回中介绍了Jetpack中小红点相关的内容，本章回中将介绍 脚手架。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的脚手架是指程序的框架，准确的说是指程序中某个页面的框架，它提供了页面的标题栏,页面主体和页面底部导航栏，这些都是一个页面的主要内容，在Jetpack库中，通过可组合函数Scaffold来实现脚手架。本章回中将详细介绍该函数的使用方法。

2. 使用方法

2.1 核心思想

可组合函数Scaffold可以看作是一种布局，它在布局中提供了槽位，这些槽位用来存放页面中主要的内容，比如标题栏。槽位在布局中的位置则由脚手架控制，开发人员不需要关于槽位的具体位置和布局，只需要把与槽位相关的内容添加到槽位就可以。

2.2 具体内容

可组合函数Scaffold提供了相关的参数，这些参数可以当作槽位，开发人员给这些参数赋值相当于在槽位中添加内容，下面我们将介绍该函数中常用的参数：

topBar参数: 主要用来存放标题栏相关的内容；
bottomBar参数:主要用来存放底部导航栏相关的内容；
snackbarHost参数:主要用来存放底部通知相关的内容;
floatingActionButton参数:主要用来存放浮动按钮；
floatingActionButtonPosition参数:主要用来控制浮动按钮的位置；
content参数:主要用来存放页面主体相关的内容，通常嵌套其它的布局函数；

上面介绍的这些函数中除了floatingActionButtonPosition参数外，其它的参数都是可组合函数类型(@Composable () -> Unit = {}),脚手架就是通过这些可组合函数实现槽位的。

此外，content参数比较特殊，它是Scaffold函数的最后一个参数，按照尾lambda的语法，可以把该参数的内容移动到函数体内，因此我们可以在Scaffold函数体内添加页面主体的内容。

3. 示例代码

Scaffold(
    topBar = { customCenterAppBar()},

    bottomBar = { customBottomBar() },

    //控制FAB的位置,只有两种
    floatingActionButtonPosition = FabPosition.End,
) {innerPadding->
    Column(modifier = Modifier
        .padding(innerPadding)
        .fillMaxSize()
        .background(color = CusColor)
    ) {
        Text(text = "hello")
    }
}