Android jetpack compose 组件学习

迈不过友情╰ 2024-02-19 11:37 31阅读 0赞

官网地址：[https://developer.android.com/jetpack/compose/tutorial?hl=zh-cn][https_developer.android.com_jetpack_compose_tutorial_hl_zh-cn]

## 一、写一个 hello world ##

在New Project的时候选择Photo and Tablet里的Empty Compose Activity，如下所示：

![87e27350854320ef0f1d3d9280fa77db.png][]

打开这个project之后，可以看到MainActivity的代码如下：

class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                ComposeTheme {
                    // A surface container using the 'background' color from the theme
                    Surface(
                        modifier = Modifier.fillMaxSize(),
                        color = MaterialTheme.colors.background
                    ) {
                        Greeting("Android")
                    }
                }
            }
        }
    }
    
    @Composable
    fun Greeting(name: String) {
        Text(text = "Hello $name!")
    }
    
    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        ComposeTheme {
            Greeting("Android")
        }
    }

直接运行在手机上，可以看到显示一个Hello Android的画面

![b005b5f3ee4ae117590d04e55345dacc.jpeg][]

然后我们尝试修改一行，来显示我们自己要显示的内容

package com.example.compose
    
    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.compose.material.Text
    import androidx.compose.runtime.Composable
    
    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                MessageCard(name = "Tom")
            }
        }
    }
    
    @Composable
    fun MessageCard(name: String) {
        Text(text = "Hello $name")
    }

在屏幕上就会显示一个Hello Tom

![0ec5ed6a9c42c687952505ebe3a1820f.jpeg][]

这就完成了Compose的第一个hello world。

上述代码中，用的@Composable注解，让其成为了一个可组合函数。

接着，借助 @Preview 注解，可以在 Android Studio 中预览可组合函数，而无需构建应用并将其安装到 Android 设备或模拟器中。该注解必须用于不接受参数的可组合函数。因此，无法直接预览 MessageCard 函数，而是需要创建另一个名为 PreviewMessageCard 的函数，由该函数使用适当的参数调用 MessageCard。

@Preview
    @Composable
    fun PreviewMessageCard() {
        MessageCard("Jerry")
    }

如图所示：这个时候就可以在右边看到预览的样子

![146fd104eeafdf7bb6ebcf9e48b44d40.png][]

## 二、布局 ##

class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                MessageCard(BookMessage("Android", "Jetpack Compose"))
            }
        }
    }
    
    data class BookMessage(val author: String, val bookName: String)
    
    @Composable
    fun MessageCard(msg: BookMessage) {
        Column {
            Text(text = msg.author)
            Text(text = msg.bookName)
        }
    }
    
    @Preview
    @Composable
    fun PreviewMessageCard() {
        MessageCard(
            msg = BookMessage("余华", "活着")
        )
    }

为了显示竖着的两个文本元素的信息，可以用Column来排列两个文本元素信息。

![4cc9713ae68f295a27bf96b13141c1fd.png][]

组一个横着的图片和文字布局

@Composable
    fun MessageCard(msg: BookMessage) {
        Row {
            Image(
                painter = painterResource(R.drawable.data_analyse),
                contentDescription = "Contact profile picture",
            )
            Column {
                Text(text = msg.author)
                Text(text = msg.bookName)
            }
        }
    }

显示效果如下：

![c02bf74822a5d5cd81f5ab4e2da337d4.png][]

修改一下图片的样式和文字的样式

@Composable
    fun MessageCard(msg: BookMessage) {
        Row {
            Image(
                painter = painterResource(R.drawable.data_analyse),
                contentDescription = "Contact profile picture",
                modifier = Modifier.size(100.dp).clip(CircleShape)
            )
            Spacer(modifier = Modifier.width(8.dp))
            Column {
                Text(text = msg.author, fontSize = 40.sp, fontWeight = FontWeight.Bold)
                Spacer(modifier = Modifier.width(10.dp))
                Text(text = msg.bookName, fontSize = 40.sp, fontWeight = FontWeight.Bold)
            }
        }
    }

效果如下：

![30caa5bc1b455ebdd5f84c04930b86b9.jpeg][]

[https_developer.android.com_jetpack_compose_tutorial_hl_zh-cn]: https://developer.android.com/jetpack/compose/tutorial?hl=zh-cn
[87e27350854320ef0f1d3d9280fa77db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/01de862dd6b2480fba325d74482db652.png
[b005b5f3ee4ae117590d04e55345dacc.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/015a6069957c47ceabc35de3eb51c23f.png
[0ec5ed6a9c42c687952505ebe3a1820f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/df771d0f458d44cd8a1d7e5735e45f6c.png
[146fd104eeafdf7bb6ebcf9e48b44d40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/c1324f39cfd34775ad223558cafbcd21.png
[4cc9713ae68f295a27bf96b13141c1fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/08bdae36376e45d6942ad2519ca3977c.png
[c02bf74822a5d5cd81f5ab4e2da337d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/44ab191a5c894452909d4538adad68a0.png
[30caa5bc1b455ebdd5f84c04930b86b9.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3a0193633d8b4ffe8745c873ba11d23f.png