多行文本

APP的界面，就是一棵树，从树根开始，一层层的。

界面元素（UI控件）采用多层次结构，元素中又包含其他元素。在Kotlin Compose 中，可以通过从可组合函数中调用其他可组合函数来构建界面层次结构。

我们前面就学了一个简单的显示一行文本，那么下面我们就显示多行文本。

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(Message("Foxdevelop", "Jetpack Compose"))
        }
    }
}

data class Message(val author: String, val body: String)

@Composable
fun MessageCard(msg: Message) {
    Text(text = msg.author)
    Text(text = msg.body)
}

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard(
        msg = Message("Lexi", "Hey, take a look at Jetpack Compose, it's great!")
    )
}Code language: Kotlin (kotlin)

上面代码，我们使用了一个数据类，类似我们编程常用的Model类，是用来呈现数据的。

数据类

data class Message(val author: String, val body: String)

这个Model类，定义了两个属性，都是String 一个是author 一个是body 用来存储作者和正文。

自定义组合类接收实体对象

下面是我们的自定义组合类

@Composable
fun MessageCard(msg: Message) {
    Text(text = msg.author)
    Text(text = msg.body)
}

和前面的例子不同，有了前面的Model类Message，我们可以直接用来作为对象参数，这样就不需要传入多个字符串了。代码变得更加简单直观。

传入的msg是一个Message的对象，然后直接在函数内部，连续调用两次Text来呈现作者Text(text = msg.author)和正文 Text(text = msg.body)

预览类

前面也说过，我们的预览类，是给程序员调试用的，可以直接在Android Studio上就可以不用运行就看到界面的显示效果。

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard(
        msg = Message("John", "Hey, take a look at Jetpack Compose, it's great!")
    )
}Code language: JavaScript (javascript)

不过我们的预览类里面调用MessageCard的时候 就需要写死传入的对象类的，两个参数了。 msg = Message(“John”, “Hey, take a look at Jetpack Compose, it’s great!”) 这里相当于new对象，传入两个测试字符串。

正式环境下

正式环境下面，调用我们的可组合函数的时候，就是生产环境的字符串了。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(Message("Foxdevelop", "Jetpack Compose"))
        }
    }
}

MessageCard(Message(“Foxdevelop”, “Jetpack Compose”)) 在生产环境中调用MessageCard 传入的是生产的数据。和预览不一样。

最终，我们看到页面显示了两句文本，但是他们重叠在一起了，为什么这样？

因为我们并没用到布局，所有的文本都是直接平铺显示到界面上面。