二、使用Jetpack Compsoe编写一个写小说的Android应用：新建小说界面篇

HO灵

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

阅读量75

点赞数

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

于 2023-11-26 16:31:38 首次发布

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

版权

Android 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

前排叠甲：我只是门外汉学着玩，大佬轻喷，有些地方设计的不是特别人性化请见谅。

主要功能：本次要设计的是第二个界面，就是在主页面的右上角点一下加号就能跳转到这一页。

1、首先是设计第二页，新建小说页面。

（本页面还会和第一页的修改小说名字按钮有关联，但是先不实现该功能，问就是还没做到那。）

我对项目结构进行了调整，后续可能还会调整，注意你的目录结构。

这次直接上全代码，有了上一篇的知识，这一篇的界面代码应该不用怎么细讲了，所以先上代码。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Previe
fun FictionNamePage() {
    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=22.sp)
                        IconButton(onClick = { },modifier = Modifier.size(50.dp)) {
                            Image(painter = painterResource(id = R.drawable.btn_finish),
                                contentDescription = "add a book" )
                        }
                    }
                }
            )
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 20.dp, top = 80.dp)
                ,
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            )
            {
                Text(
                    text = "小说名称",
                    fontSize = 20.sp
                )
            }
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 24.dp, top = 10.dp)
                ,
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            )
            {

                OutlinedTextField(value = "",
                    onValueChange = {""},
                    label = { Text(text = "请输入小说名称")},
                    singleLine = true,
                    maxLines = 1,
                    modifier = Modifier.background(Color.White)
                )
            }
        }
    }
}

实现的效果大概是这样的：

当然你也可以运行以下看看效果，这个文本输入框是带特效的，当输入文本时它的提示词会自己上去，比如我将OutlinedTextField中的value =""改为value ="哈哈"

这一段代码中topbar的前半部分完全是复制粘贴主页面的，就把Text改改，把图标换掉就完事。

下半部分也很简单，就一个文本Text和一个输入框TextField。

其实输入框有很多类型，我一开始用的是最简单的TextField，发现他有一个难看的背景，而且我还不会去掉它的背景，好像是将color设置为transparent，但是感觉这个Outlined的也挺好用，所以就用这个了。有需求的话自己去我上次给的开发者网站找示例。

2、实现最简单的跳转功能

1）给页面添加跳转代码

现在我们有了两个页面MainPage和FictionNamePage，自然而然就会想到先实现跳转，但是跳转说实话好像稍微有点麻烦，所以这次就先实现一个最简单的不带参数的跳转。

为什么说最简单的呢，因为一般页面跳转会涉及到页面间数据的传递，单纯的页面跳转好像没啥用吧？

但是这里先实现跳转再往下实现传递数据，所以这里就要用到Compose中的导航了Navigation。

首先添加扩展：（要在app的那个gradle中添加）

implementation ("androidx.navigation:navigation-compose:2.6.0-alpha08")

添加完成后点击同步，前面的都是自己生成的，注意版本，如果你看到这篇文章的时间比较靠后，它的版本和功能可能都会出现变化，那个时候就祝你好运了！

好的，扩展下载完成后，Sync Now会变成Open，之后我们打开MainPage，添加导航控制器：

注意你在页面处传入参数后将不再能进行预览，此时Preview会报错，我不知道有没有其他方法，之后只能运行软件进行调试或者脑内实时渲染了。

首先MainPage改成了这样：

fun MainPage(navController: NavController) {}

其次在+号按钮的onClick中添加代码navController.navigate：

IconButton(
           onClick = {
                     navController.navigate("mod_fic_page"){launchSingleTop = true}
                      },
                            modifier = Modifier.size(50.dp)
                        ) {
                            Image(
                                painter = painterResource(id = R.drawable.btn_add),
                                contentDescription = "add a book"
                            )
                        }

但是这时又出现了另一个问题，当你写navController.navigate这个函数时，它需要一个route路线，我的代码中直接给了mod_fic_page，但是如果直接按这样是运行不了的，因为我们还没定义mod_fic_page，所以要先定义这个东西。

这里同时提一下launchSingleTop这个参数，这是单例启动，好像是跳转到这个页面时会清空栈内在它上面的其他界面，会对返回操作有影响，尤其是使用手机上的物理返回键，先就这样用，之后逻辑可能会更改。

2）创建导航

为了进行分类管理现在创建一个PageNavHost函数专门进行页面的跳转管理：

@Composable
fun PageNavHost() {
    // 创建NavController
    val navController: NavHostController = rememberNavController()
    // 用NavHost将NavController和导航图相关联，startDestination指定起始的可组合项
    NavHost(navController = navController, startDestination = "main_page") {
        // 给主页指定路径
        composable("main_page") { MainPage(navController) }
        // 给新建小说指定路径
        composable("mod_fic_page") { FictionNamePage() }

    }
}

目前我的文件分类为