一、使用Jetpack Compsoe编写一个写小说的Android应用：主页界面篇

前排提醒：后续方法全是自己摸索整理，如果你也解决不了的问题我大概也解决不了，且要会创建Compose Project，不会的话去其他地方搜一下视频。

本app使用的编译版本和目标版本如下，不同版本可能会有变化，请查看开发者网站。

compileSdk = 33

targetSdk = 33

首先是第一个界面主页面，包含功能有导入新建和列表展示，列表项内还要有重命名，删除和长按导出功能。

主要界面如下

注意本次只实现界面效果，不添加任何功能。

1、前期准备

首先在colors文件中定义两个颜色【toolbar_color】和【gray】，这是后期要用到的上方工具栏颜色和卡片颜色。

<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="toolbar_color">#57B4C5</color>
    <color name="gray">#EFEFEF</color>
</resources>

随后创建MainPage函数，其中注解@Preview可以让你实时预览界面，但是如果传入了参数就无法预览了。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun MainPage() {
}

2、创建页面MainPage基础结构

首先要采用Scaffold结构，这样可以自定义添加上面的工具栏，而且此函数还有下工具栏BottomBar和悬浮按钮可以自行探索。

fun MainPage() {

    Scaffold(
        topBar = {
           
        }
    ) { innerPadding ->

        
    }
}

接着先添加topbar上面的工具栏

fun MainPage() {

    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_import),
                                contentDescription = "import text" )
                        }
                        Text(text = "主页",fontSize=20.sp)
                        IconButton(
                            onClick = {},
                            modifier = Modifier.size(50.dp)) {
                            Image(painter = painterResource(id = R.drawable.btn_add),
                                contentDescription = "add a book" )
                        }
                    }
                }
            )
        }
    ) { innerPadding ->

    }
}

先说上面的代码，首先直接复制粘贴不能运行，因为下面还有代码。

然后Compose的代码一般都是（）内写属性{}内写子控件，所以先看TopAppBar：

fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
)

上面这个是已经定义好的函数，可以使用Ctrl+单击左键点击TopAppBar函数进行查看，从里面可以看到能够设置哪些属性。

再返回我们的代码就能看到，设置了modifier，title（必须设置），colors，actions。

modifier里面有很多内容，不建议全去看，用到再百度就行了，一般都是基础属性比如宽高，颜色，排列方式之类的。

title这个是只用当你的actions里面为空的时候才有效，会显示出来，如果你actions内添加了Row之类的布局的话，它就被覆盖了，这也是Row里面为啥再添加一个Text的原因。

colors这个也有好几个属性，包括前景，背景，内容等这里不展示了，用法就是上面的代码。

actions里面就是真正在工具栏内添加东西的地方，可以看到我们先是添加了一个Row布局，然后在里面添加了两个IconButton和一个Text；这些子控件的位置由Row来控制，所以给Row添加了间隔Arrangement.SpaceBetween，和垂直居中。

【说实话这种控制布局的方式只适用于简单布局，如果我想让中间的文本向左或者右偏个几dp，这种简单的布局就无法实现，需要用到约束布局，这个在后期应该也会用到，这里比较简单就不用约束布局了。】

3、在这之中有一些素材比如btn_import，btn_add等，都是它自带的素材具体找的方法是：

点击加号以后选择Vector_assest，然后出现如下界面

点Clip art这个图标就能打开自带的图标库，你要是用自己的也可以去其他网站下载。点开就能在搜索的地方搜你想要的了，但是是英文，所以有时候你得自己找，这里就不给提示了，多找找。

我目前的库里有这些，透明度都是70%

比如我随便点一个，然后将透明度调到70%，其他都不动。

4、添加下面的列表内容

下面我想让它显示为一个卡片形状的列表，但是如果没有数据的话列表将啥都不显示，而且我还没做到列表这块，这个功能之后再完善，现在先做一个固定的Card视图出来。

在上面代码的基础上再添加，这次主要在innerPadding部分：

fun MainPage() {

    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_import),
                                contentDescription = "import text"
                            )
                        }
                        Text(text = "主页", fontSize = 20.sp)
                        IconButton(
                            onClick = {},
                            modifier = Modifier.size(50.dp)
                        ) {
                            Image(
                                painter = painterResource(id = R.drawable.btn_add),
                                contentDescription = "add a book"
                            )
                        }
                    }
                }

            )
        }
    ) {innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
        ) {
            Card(
                onClick = {},
                modifier = Modifier
                    .padding(12.dp)
                    .height(70.dp),
                colors = CardDefaults.cardColors(
                    containerColor = colorResource(id = R.color.gray),
                ),
            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight(),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                )
                {
                    Row(
                        modifier = Modifier
                            .weight(0.2f)
                            .fillMaxHeight(),
                        horizontalArrangement = Arrangement.End,
                        verticalAlignment = Alignment.CenterVertically
                    )
                    {
                        IconButton(onClick = { }, modifier = Modifier.size(50.dp)) {
                            Image(
                                painter = painterResource(id = R.drawable.btn_rename),
                                contentDescription = "add a book"
                            )
                        }
                    }
                    Row(
                        modifier = Modifier
                            .weight(0.8f)
                            .fillMaxHeight()
                            .padding(4.dp),
                        horizontalArrangement = Arrangement.Start,
                        verticalAlignment = Alignment.CenterVertically
                    )
                    {
                        Text(
                            text = "小说名称",
                            modifier = Modifier
                                .padding(8.dp),
                            fontSize = 20.sp
                        )
                    }
                    Row(
                        modifier = Modifier
                            .weight(0.2f)
                            .fillMaxHeight(),
                        horizontalArrangement = Arrangement.Start,
                        verticalAlignment = Alignment.CenterVertically
                    )
                    {
                        IconButton(onClick = { }, modifier = Modifier.size(50.dp)) {
                            Image(
                                painter = painterResource(id = R.drawable.btn_delete),
                                contentDescription = "add a book"
                            )
                        }
                    }
                }


            }

        }
    }

}

首先从上往下看，我们先添加了一个Column，这是列视图，只有在列视图中再次添加行视图Row才能实现一个基础的列表效果，所以将Column填充到剩余的空间中（innerPadding）。

之后添加了一个卡片视图Card，就是灰色底色的部分，之后添加的控件都在这个里面。

可以看到这段代码主要以嵌套Row为主，因为只有放在Row中才能对它的子控件进行进一步排列控制，但是这样是不好的，我还没试过约束布局，不知道约束布局会不会简化这个代码的长度，先埋个坑，这里就先用好几个Row的方式实现了。

其余的都是一些基础语法，这里就不强调了，如果不知道的话可以去谷歌开发网站找找示例：

探索 Android Studio  |  Android Developers

到这里主页面就算完成了，下一篇就是跳转到创建小说界面了！

希望你也能做出这个效果！