Android jetpack compose 组件学习

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

一、写一个 hello world

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

打开这个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的画面

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

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

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

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

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

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

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

二、布局

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来排列两个文本元素信息。

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

@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)
        }
    }
}

显示效果如下：

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

@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)
        }
    }
}

效果如下：