三、使用Jetpack Compsoe编写一个写小说的Android应用：新建章节列表界面篇并实现跳转传参

HO灵

已于 2023-11-29 22:11:06 修改

阅读量96

点赞数

分类专栏： Android 文章标签： android 算法 kotlin android jetpack

于 2023-11-26 19:05:51 首次发布

本文链接：https://blog.csdn.net/ncm1584716/article/details/134630896

版权

Android 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

前排叠甲：和上一篇一样

本次要实现如下几点功能：

a）创建章节列表界面

b）给新建小说页面添加返回功能

c）给章节列表添加传参和返回功能

1、创建章节列表界面

老生常谈的事了，无非就是一些布局的调整，这里直接上代码：

fun ChapterListPage(navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                modifier = Modifier.height(50.dp), // 设置高度为 50dp
                title = { Text("") },
                colors = TopAppBarDefaults.smallTopAppBarColors(
                    containerColor = colorResource(id = R.color.toolbar_color)
                ),
                actions = {
                    Row (modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically){
                        IconButton(onClick = {}
                            ,modifier = Modifier.size(50.dp),) {
                            Image(painter = painterResource(id = R.drawable.btn_back),
                                contentDescription = "add a book" )
                        }
                        Text(text = "小说名称",fontSize=20.sp)
                        IconButton(onClick = {  },modifier = Modifier.size(50.dp)) {
                            Image(painter = painterResource(id = R.drawable.btn_delete),
                                contentDescription = "add a book" )
                        }
                    }
                }

            )
        }
    ) { innerPadding ->

        Column(
            modifier = Modifier
                .padding(innerPadding),
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    ,
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            )
            {
                Column(modifier = Modifier
                    .weight(0.7f)
                    .padding(start = 12.dp, top = 8.dp),
                    horizontalAlignment = Alignment.Start)  {
                    Text(
                        text = "章节列表",
                        fontSize = 20.sp
                    )
                }
                Column(modifier = Modifier
                    .weight(0.3f)
                    .padding(end = 12.dp, top = 8.dp),
                    horizontalAlignment = Alignment.End) {
                    Text(
                        text = "102w字",
                        fontSize = 16.sp
                    )
                }
            }

            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(60.dp),
            )
            {
                Row(modifier = Modifier
                    .padding(start = 8.dp)
                    .height(30.dp)
                    .fillMaxWidth()) {
                    Column(modifier = Modifier
                        .padding(start = 8.dp)) {
                        Text(text = "第1章",
                            fontSize = 20.sp)
                    }
                    Column(modifier = Modifier
                        .padding(start = 16.dp),) {
                        Text(text = "初入世界",
                            fontSize = 20.sp)
                    }
                }
                Row(modifier = Modifier
                    .padding(end = 16.dp)
                    .height(30.dp)
                    .fillMaxWidth(),
                    verticalAlignment = Alignment.Bottom) {
                    Column(modifier = Modifier
                        .weight(0.3f),
                        horizontalAlignment = Alignment.End) {
                        Text(text = "3562字",
                            fontSize = 16.sp)
                    }
                    Column(modifier = Modifier
                        .weight(0.7f),
                        horizontalAlignment = Alignment.End) {
                        Text(
                            text = "time",
                            fontSize = 16.sp
                        )
                    }

                }


            }


        }
    }
}

效果如下，不要问我按钮资源在哪，之前的文章已经说过了。

这次的界面中，topbar部分还是三样东西，所以沿用SpaceBetween排列

下面的主要是固定行，其中包含一个章节列表的Text和一个统计总字数的Text

再下面是一个列表，因为现在没有数据，所以将它写死成一个item，其中包含章节序号，名称，字数和最后一次的修改时间。

本次的布局也没啥好说的都是行列布局的组合，这里就不再多说了。

2、给新建小说页面添加返回功能

这个很简单吧，就是给它的按钮添加一个navigate语句就好了

navController.navigate("main_page"){launchSingleTop = true}

这样功能就实现了，可以去测试一下！当然要记得在页面函数中传入导航控制器参数。

fun FictionNamePage(navController: NavController,)

3、给章节列表页面添加返回功能

这个和上面一样，传入控制器参数，给返回按钮添加返回语句即可。

不过现在产生了新的问题，要如何跳转到章节列表页面？

这里我的想法是点击主页面的Card条进行跳转，所以就要在Card的onClick参数中传入跳转语句：

注意这里已经在PageNavHost跳转管理函数中进行了提前预设，否则无法跳转！

好，截止到目前已经实现的功能有

主页面：点击右上角+号按钮跳转到新建小说页面，点击卡片跳转到章节列表页面

新建小说页面：点击返回可以返回到主页面

章节列表页面：点击返回可以返回到主页面

4、传参跳转

但是此时我又出现了新的需求，我想让主页面显示的【小说名称】传递到章节列表页面的topbar中显示

此时就有了跳转页面获取参数的需求，那么要如何做呢？

首先要在ChapterListPage函数中添加一个参数backStackEntry：

fun ChapterListPage(navController: NavController, backStackEntry: NavBackStackEntry)

此函数用于获取从其他页面传递过来的参数，无论哪个页面都是这个参数

那么要如何让传递来的参数和你想获取的参数一一对应呢？这就要用到键值：

val fictionName = backStackEntry.arguments?.getString("fiction_name")

我们用这行代码来获取传递来的参数中的我们想要的值，如果没有就是空。

那么有了这个参数，我们不就能在本页面最上方显示了吗，只需要将原来的Text文本中的值改掉就可以了

Text(text = "$fictionName",fontSize=20.sp)

这样就完成了参数获取端的代码改写。

再到参数发送端，也就是MainPage页

参数发送端就i更加简单了，只需要在原来跳转页面的语句后面加上要传递的参数就好了

navController.navigate("chapter_list_page/斗破大陆")

这样就完成了发送端的参数传递，但是刚刚接收端的键值为何没用到？

因为在跳转管理函数中还需要进行设置：

// 给章节列表页指定路径
        composable(
            "chapter_list_page/{fiction_name}",
            arguments = listOf(navArgument("fiction_name") {
                //表示传递的参数是String类型
                type = NavType.StringType
            })
        ) { backStackEntry ->
            //backStackEntry里面封装了参数
            ChapterListPage(navController, backStackEntry)
        }

这里就指定了要传递的参数和参数的数据类型，所以这样才是完整的链路。