Jetpack Compose-入门

前言

之前写过一系列的Jetpack Compose相关的文章，这里做一下整体的汇总。

汇总

UI相关

界面的适配

https://www.psvmc.cn/article/2024-04-07-jetpack-compose-ui-adaptation.html

基本组件

https://www.psvmc.cn/article/2024-03-13-jetpack-compose-components.html

图片

https://www.psvmc.cn/article/2024-03-13-jetpack-compose-image.html

布局

https://www.psvmc.cn/article/2024-03-13-jetpack-compose-layout.html

列表

https://www.psvmc.cn/article/2024-03-14-jetpack-compose-list.html

Modifier

https://www.psvmc.cn/article/2024-03-14-jetpack-compose-modifier.html

图标字体

https://www.psvmc.cn/article/2025-07-30-jetpack-compose-iconfont.html

Effect与协程

https://www.psvmc.cn/article/2024-03-15-jetpack-compose-coroutine.html

权限

https://www.psvmc.cn/article/2025-07-30-jetpack-compose-permission.html

页面跳转与传值

https://www.psvmc.cn/article/2024-03-22-jetpack-compose-activity-navigation.html

创建项目

现在创建项目默认就是使用的Jetpack Compose。

创建Activity

但是使用IDEA没有直接创建使用Jetpack Compose的Activity。

我们可以创建空的Activity，把生成布局文件取消勾选。

然后修改一下

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.xhkjedu.zxs_android.ui.theme.AppAndroidTheme

class LoginActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppAndroidTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->

                    Column(
                        modifier = Modifier
                            .padding(innerPadding)
                            .fillMaxSize()
                            .background(Color.White)
                    ) {
                        Text("我是标题")
                    }
                }

            }
        }
    }
}

沉浸式状态栏

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.Zxs_android" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">false</item>
    </style>
</resources>

添加后如果我们向让我们的界面延伸到状态栏

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.xhkjedu.zxs_android.ui.theme.AppAndroidTheme

class LoginActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppAndroidTheme {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Red)
                ) {
                    Text("我是标题")
                }
            }
        }
    }
}

这时可以根据实际情况自己空留状态栏的高度

Box(
    modifier = Modifier
        .statusBarsPadding()
        .fillMaxSize(),
) {

}

如果想在状态栏之内

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.xhkjedu.zxs_android.ui.theme.AppAndroidTheme

class LoginActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppAndroidTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .padding(innerPadding)
                            .fillMaxSize()
                    ) {
                        Text("我是标题")
                    }
                }

            }
        }
    }
}

全局变量

CommonTheme.kt

import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.unit.dp

object CommonTheme {
    val DpXs = 4.dp
    val DpS = 8.dp
    val DpM = 12.dp
    val DpL = 16.dp
    val DpXl = 28.dp

    val CornerXl = RoundedCornerShape(DpXl)
    val CornerXlTop =
        RoundedCornerShape(
            topStart = DpXl,
            topEnd = DpXl,
            bottomEnd = 0.0.dp,
            bottomStart = 0.0.dp
        )
    val CornerXs = RoundedCornerShape(DpXs)
    val CornerXsTop =
        RoundedCornerShape(
            topStart = DpXs,
            topEnd = DpXs,
            bottomEnd = 0.0.dp,
            bottomStart = 0.0.dp
        )
    val CornerFull = CircleShape
    val CornerL = RoundedCornerShape(DpL)
    val CornerLEnd =
        RoundedCornerShape(
            topStart = 0.0.dp,
            topEnd = DpL,
            bottomEnd = DpL,
            bottomStart = 0.0.dp
        )
    val CornerLTop =
        RoundedCornerShape(
            topStart = DpL,
            topEnd = DpL,
            bottomEnd = 0.0.dp,
            bottomStart = 0.0.dp
        )
    val CornerM = RoundedCornerShape(DpM)
    val CornerNone = RectangleShape
    val CornerS = RoundedCornerShape(DpS)
}