Jetpack Compose入门学习（课程作业）

1.介绍 

1.背景

（课程作业）

Android开发转向kotlin和Jetpack Compose的趋势，对开发者技术的要求也在不断更新，其中Jetpack Compose作为Google推出的一个新的UI工具包，相比传统的xml的布局开发方式有着多重优势，值得开发者深入学习，本博客内容为从xml方式转向Jetpack Compose的入门学习。

2.Jetpack Compose特点

       开发效率提升：内置丰富的动画效果，无需额外库即可实现复杂的动画效果。可实时预览，实现快速迭代。

       代码量少：无需编写xml布局文件，在活动中编写代码即可实现主要功能。

       性能强大：使用更现代的渲染引擎，直接操作Canvas绘制UI，减少了传统View系统中的层级问题，优化了渲染性能。动画实现也更加高效，通过remember和LaunchedEffect等工具可以轻松实现动态效果，无需额外的工具和逻辑。

    

2.内容

1.创建项目：

   通过New Project创建一个Empty Activity(仅支持Kotlin)

   自动生成对应设置和依赖：

   在项目的build.gradle文件中

android {
    ...
    buildFeatures {
        compose true
    }
    ...
}

dependencies {
    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom)) // 引入 Compose BOM，它将为所有 Compose 库提供一致的版本
    implementation(libs.androidx.material3) // Material 3 组件库
    implementation(libs.androidx.ui) // 注意：androidx.ui 并不是一个官方的库，可能是您自定义的或来自某个第三方库
    implementation(libs.androidx.ui.graphics) 
    implementation(libs.androidx.ui.tooling.preview) // 用于 Compose 的预览工具
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
    androidTestImplementation(platform(libs.androidx.compose.bom)) // 在 androidTest 中也使用 Compose BOM
    androidTestImplementation(libs.androidx.ui.test.junit4) 
    debugImplementation(libs.androidx.ui.tooling) // 用于调试的 Compose 工具库
    debugImplementation(libs.androidx.ui.test.manifest) 
}

创建项目时，提供了一些主题，颜色，字体，形状等配置

可自行修改并应用

主活动：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()
//使Activity的界面全屏显示，没有底部导航栏的遮挡

        setContent {
//setContent用于设置Activity的内容

            MyApplicationTheme {
//主题应用块，它规定了整个应用的样式和主题

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->

//用modifier来设置该组件的部分属性，本例中提供了一个包含顶部栏（AppBar）、底部栏（BottomBar）
//和内容区域的布局结构。Modifier.fillMaxSize()确保Scaffold填满整个屏幕。innerPadding是 
//Scaffold内部内容的内边距，用于确保内容不会被顶部或底部的栏遮挡。

                    Greeting(
                        name = "Android11",
                        modifier = Modifier.padding(innerPadding)
//modifier用于应用内边距，以确保Greeting组件不会与Scaffold的边界重叠。
                    )
                    //在布局组件内执行的操作，需要添加@Composable注解

                }


            }
        }
    }
}

//添加@Composable注解的方法可在布局组件中执行
@Composable 
fun Greeting(name: String, modifier: Modifier = Modifier) {

    Text(
        text = "Hello $name!",
        modifier = modifier
    )
//Text 是 Jetpack Compose 中的一个基本组件，用于在屏幕上显示文本。

}

//预览函数，不启动项目即可在Split窗口中直接预览效果
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        Greeting("Android")
    }
}

从主活动代码可用看出， Compose 使用了一种称为“组合”的声明式 UI 编程模型，其中 UI 是由一系列可组合的函数构建的。

2.基本组件

1.Row和Colum

类似于xml布局方式的LinearLayout，可用通过Row和Colum使其中组件横向或纵向排布

Column{
    Row {
        Text(text="t1",Modifier.padding(horizontal = 18.dp))
        Text(text="t2",Modifier.padding(horizontal = 18.dp))
    }
    Row {
        Text(text="t1",Modifier.padding(horizontal = 18.dp))
        Text(text="t2",Modifier.padding(horizontal = 18.dp))
    }
    Row {
        Text(text="t1",Modifier.padding(horizontal = 18.dp))
        Text(text="t2",Modifier.padding(horizontal = 18.dp))
    }
}

通过Column和Row相组合的方式，可以实现基本的布局处理

2.Material Design

通过Material Design可以事先定义所需的主题，颜色，形状，样式等，然后在活动中快速调用。

例如，可以使用

Row(modifier = Modifier.background(MaterialTheme.colorScheme.background)) {
        。。。。
    }

设置当前组件的背景色（也可以设置其他属性）在深色主题和浅色主题下有不同表现，然后在

Theme.kt中设置具体的样式

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80,
            background = Color(0xFFFFFBFE),
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    //通过background属性设置背景色
    background = Color(0xFFE91E63),
   /* surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),*/

)

3.数据传递

在xml布局开发的ListView，RecyclerView中，不仅需要设置布局，获取数据，还要配置适配器，步骤相当繁琐，而Jetpack Compose只需要一个提供数据的类，即可在布局时直接调用，大大减少了代码量。

创建一个提供数据的SampleData类

package com.example.myapplication
object SampleData {
    // 示例对话数据
    val conversationSample = listOf(
        Message("User1", "Hello, how are you?"),
        Message("User2", "I'm good, thanks! How about you?"),
        Message("User1", "I'm doing well, thanks for asking!")
        // 可以添加更多消息数据
    )
}

// 消息数据类
data class Message(val author: String, val body: String)

在活动中应用：

设置MessageCard数据显示方式，相当于ListView和ReccyclerView中设置每项的布局，可以添加Image，Button等更多组件

@Composable
fun MessageCard(message: Message) {
    // 这里实现您的 UI 逻辑
    // 例如，您可以使用 Text 组件来显示消息的作者和内容
    Column {
        Text(text = message.author)
        Text(text = message.body)
        // 可以添加更多 UI 元素来展示消息
    }
    // 注意：上面的 Column 和 Text 组件只是示例，您可能需要根据您的 UI 设计进行调整
}

在LazyColumn中用MessageCard显示每条信息

@Composable
fun test(messages: List<Message>){
    LazyColumn {
        items(messages){ message->
            MessageCard(message)
        }
    }
}

在应用中显示

4.状态管理

用remenber记录状态值的变化

var isclicked by remember { mutableStateOf(false) }

当Composable函数重新执行时（比如因为界面需要重新绘制），remenber会确保它委托的值保持不变，除非这个值依赖于的其他参数发生了变化

对于 mutableStateOf(false) ，当这个状态对象的值改变时（本例初始值为false），Compose框架会自动触发UI的重新组合（recomposition），从而更新界面。

修改MessageCard，实现body部分文字初始隐藏，点击显示

@Composable
fun MessageCard(message: Message) {
    //设置变量记录是否点击，并交由remenber保存
    //mutableStateOf(false)设置初始为false，改变后重绘页面
    var isclicked by remember { mutableStateOf(false) }
    // 这里实现您的 UI 逻辑
    // 例如，您可以使用 Text 组件来显示消息的作者和内容
    Column(modifier = Modifier.clickable { isclicked=!isclicked }) {
        Text(text = message.author)
        //根据变量显示
        if(isclicked==true)
        {Text(text = message.body)}
        // 可以添加更多 UI 元素来展示消息
    }
    // 注意：上面的 Column 和 Text 组件只是示例，您可能需要根据您的 UI 设计进行调整
}

5.动画效果

 使用Surface实现动画效果（示例为颜色切换）

先设置surfacecolor的转化规则，根据前文是否点击的变量，在灰色和蓝色直接转化

val surfaceColor:Color by animateColorAsState(if (isclicked) Color.Gray else Color.Blue  )

然后把内容包含到Surface组件中，绑定surfacecolor

Column(modifier = Modifier.clickable { isclicked=!isclicked }) {
        Surface( color = surfaceColor) {
            Column {
            Text(text = message.author)
            //根据变量显示
            if(isclicked==true)
            {Text(text = message.body)}
            // 可以添加更多 UI 元素来展示消息
        }
        }
        }

还可以在Surface中设置圆角等属性 

Surface(
            shape = RoundedCornerShape(6.dp), // 设置圆角半径为 16dp
            color = surfaceColor) 

设置动画形式为逐渐扩大或缩小，在Surface( )中加入

modifier = Modifier.animateContentSize()
                .padding(1.dp)

 

实现了点击后产生改变背景色，并逐渐扩大的动画效果

3.总结

       本次入门学习，实现了一个使用Jetpack Compose工具包的Android项目的创建，到各个基本组件的使用，数据的传递和展示，以及动画效果的生成。对Jetpack Compose的特点和使用方法有了初步了解。我认为Jetpack Compose的可组合函数是其最大特点，通过它们的组合，可以实现性能，效率高于xml布局文件的各种功能。此外Jetpack Compose在动画展示方面也具有强大的竞争力。