Android，Compose的案例1

package com.example.mycompose052

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.mycompose052.ui.theme.MyApplicationTheme
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import androidx.compose.material3.Text

class MainActivity05 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // 使用主题中的'background'颜色作为表面容器的颜色 
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MessageCard(Message("穷则独善其身","富则兼济天下"))
                }
            }
        }
    }
}

@Composable
fun MessageCard(msg: Message){
// 在消息周围添加一些内边距 

    // 创建一个颜色列表，用于循环切换 
    val colors = listOf(Color.Red, Color.White, Color.Yellow, Color.Green, Color.Cyan, Color.Blue, Color.Magenta)

    // 创建一个状态变量，用于存储当前的颜色索引 
    val colorIndex = remember { mutableStateOf(0) }

    // 创建一个协程作用域，用于从composable函数中启动协程 
    val coroutineScope = rememberCoroutineScope()

    // 使用LaunchedEffect在composable函数的作用域中运行一个suspend函数 
    LaunchedEffect(Unit) {
        // 无限循环 
        while (true) {
            // 延迟500毫秒 
            delay(500L)
            // 将颜色索引加1，如果超过列表大小则回到0 
            colorIndex.value = (colorIndex.value + 1) % colors.size
        }
    }

    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(R.drawable.ic_launcher_background),
            contentDescription = "联系人头像",
            modifier = Modifier
                // 设置图片大小为40 dp 
                .size(40.dp)
                // 将图片裁剪为圆形 
                .clip(CircleShape)
                // 添加一个可点击的修饰符，点击时改变颜色 
                .clickable {
                    // 启动一个协程来改变颜色索引 
                    coroutineScope.launch {
                        // 将颜色索引加1，如果超过列表大小则回到0 
                        colorIndex.value = (colorIndex.value + 1) % colors.size
                    }
                }
        )

        // 在图片和列之间添加一个水平间隔 
        Spacer(modifier = Modifier.width(8.dp))

        Column {
            Text(text = msg.author, color = colors[colorIndex.value])
            // 在作者和消息文本之间添加一个垂直间隔 
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = msg.body, color = colors[colorIndex.value])
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        MessageCard(msg = Message("先天下之忧而忧","后天下之乐而乐"))
    }
}

你好，这是Bing。我可以帮你给出下列代码的API的解释和拓展，和上面已经给出API的解释对比，给出和上面没有的API的相关解释和拓展。以下是我的回答：

• clickable函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于给可组合函数添加点击事件，它接受一个lambda表达式作为参数，并返回一个Modifier对象。你可以使用这个函数来给元素添加交互功能，例如弹出对话框、跳转页面、改变状态等。例如，你可以使用以下的语法：

// 给图片添加一个点击事件，点击时弹出一个Toast
modifier = Modifier.clickable {
    Toast.makeText(context, "You clicked the image", Toast.LENGTH_SHORT).show()
}

• LaunchedEffect函数：这个函数是Compose Foundation库提供的一个顶层函数，用于在可组合函数的作用域中运行一个suspend函数，它接受一个或多个键作为参数，并返回一个DisposableEffectResult对象。你可以使用这个函数来执行一些异步操作，例如网络请求、数据库操作、延时任务等，并且可以根据键的变化来取消或重启操作。例如，你可以使用以下的语法：

// 在可组合函数中启动一个协程，每隔一秒打印一次当前时间
LaunchedEffect(Unit) {
    // 无限循环
    while (true) {
        // 延迟一秒
        delay(1000L)
        // 打印当前时间
        println(System.currentTimeMillis())
    }
}

• mutableStateOf函数：这个函数是Compose Foundation库提供的一个顶层函数，用于创建一个可观察的状态变量，它接受一个初始值作为参数，并返回一个MutableState对象。你可以使用这个函数来存储可组合函数的数据，并且当数据变化时，可组合函数会自动重新绘制。例如，你可以使用以下的语法：

// 创建一个状态变量，用于存储当前的计数值
val count = mutableStateOf(0)

// 创建一个按钮，点击时增加计数值
Button(onClick = { count.value++ }) {
    Text(text = "You clicked ${count.value} times")
}

• remember函数：这个函数是Compose Foundation库提供的一个顶层函数，用于在可组合函数中缓存数据或对象，避免重复创建或计算，它接受一个或多个键作为参数，并返回一个缓存的值。你可以使用这个函数来优化性能和内存使用，并且可以根据键的变化来重新计算或创建值。例如，你可以使用以下的语法：

// 创建一个列表，用于存储100个随机数
val list = remember {
    List(100) { Random.nextInt() }
}

// 创建一个文本，显示列表中第一个元素的值
Text(text = "The first element is ${list[0]}")

• rememberCoroutineScope函数：这个函数是Compose Foundation库提供的一个顶层函数，用于在可组合函数中创建一个协程作用域，它不接受任何参数，并返回一个CoroutineScope对象。你可以使用这个函数来从可组合函数中启动协程，并且可以在协程中访问可组合函数的上下文和状态。例如，你可以使用以下的语法：

// 创建一个协程作用域
val coroutineScope = rememberCoroutineScope()

// 创建一个按钮，点击时启动一个协程
Button(onClick = {
    // 启动一个协程
    coroutineScope.launch {
        // 在协程中执行一些操作
        doSomething()
    }
}) {
    Text(text = "Launch a coroutine")
}

---

package com.example.mycompose06

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.mycompose06.ui.theme.MyApplicationTheme

/*

- `setContent`函数：这个函数是Compose提供的一个顶层函数，用于在Activity中设置布局内容，它接受一个可组合函数作为参数，并将其转换为视图树¹²。你可以使用这个函数来替代XML布局文件，或者在XML布局中嵌入ComposeView³。
- `MyApplicationTheme`函数：这个函数是在项目中自定义的一个可组合函数，用于应用主题样式，它使用了MaterialTheme函数来创建一个Material Design风格的主题，并且支持深色模式和浅色模式的切换⁴⁵。你可以在这个函数中设置颜色、字体、形状等样式，并且可以通过MaterialTheme对象来访问这些样式。
- `Surface`函数：这个函数是Material Design库提供的一个可组合函数，用于创建一个具有背景颜色和阴影效果的表面容器，它可以包裹其他的可组合函数，并且可以设置修饰符、形状、边框等属性 。你可以使用这个函数来创建卡片、对话框、抽屉等组件。
- `Greeting`函数：这个函数是在项目中自定义的一个可组合函数，用于显示一个消息卡片，它接受一个Message对象和一个Modifier对象作为参数，并且使用了Row、Column、Image、Text等可组合函数来创建布局和元素 。你可以修改这个函数来添加更多的功能，例如点击事件、动画效果、状态管理等  。
- `Message`类：这个类是在项目中自定义的一个数据类，用于封装消息的作者和内容，它包含两个String类型的属性：author和body。你可以使用这个类来创建消息列表或者聊天界面。
- `@Composable`注解：这个注解是Compose提供的一个编译器注解，用于标记可组合函数，它告诉编译器将这些函数转换为UI元素，并且可以自动响应数据变化 。你必须在所有可组合函数上使用这个注解，并且只能从其他可组合函数中调用它们。
- `@Preview`注解：这个注解是Compose提供的一个工具注解，用于在Android Studio中预览可组合函数的效果，而无需运行应用或者模拟器 。你必须在不带参数的可组合函数上使用这个注解，并且可以设置一些属性，例如背景颜色、设备类型、字体缩放等。
- `Modifier`对象：这个对象是Compose提供的一个修饰符接口，用于修改可组合函数的外观和行为，例如大小、颜色、对齐方式、点击事件等 。你可以使用Modifier类中定义的一些扩展函数来创建修饰符对象，并且可以使用`.`运算符将多个修饰符连接起来。
- `Text`函数：这个函数是Compose UI库提供的一个可组合函数，用于创建一个文本元素，它接受一个String类型的参数作为文本内容，并且可以设置修饰符、颜色、字体、样式等属性 。你可以使用这个函数来显示标题、段落、标签等文本信息。
- `Image`函数：这个函数是Compose UI库提供的一个可组合函数，用于创建一个图片元素，它接受一个Painter类型的参数作为图片来源，并且可以设置修饰符、内容描述、缩放类型等属性 。你可以使用这个函数来显示图标、头像、背景等图片资源。
- `Row`函数：这个函数是Compose Foundation库提供的一个可组合函数，用于创建一个水平排列的布局，它可以包裹多个可组合函数，并且可以设置修饰符、对齐方式、间隔等属性 。你可以使用这个函数来创建横向的列表、导航栏、工具栏等组件。
- `Column`函数：这个函数是Compose Foundation库提供的一个可组合函数，用于创建一个垂直排列的布局，它可以包裹多个可组合函数，并且可以设置修饰符、对齐方式、间隔等属性 。你可以使用这个函数来创建纵向的列表、卡片、表单等组件。
- `Spacer`函数：这个函数是Compose Foundation库提供的一个可组合函数，用于创建一个空白间隔，它接受一个Modifier对象作为参数，并且可以设置宽度或者高度等属性 。你可以使用这个函数来调整布局中的元素之间的距离。
- `painterResource`函数：这个函数是Compose UI库提供的一个顶层函数，用于从资源中加载图片，并返回一个Painter对象，它接受一个Int类型的参数作为资源ID 。你可以使用这个函数来加载drawable或者mipmap目录下的图片文件。
- `clip`函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的剪裁形状，它接受一个Shape类型的参数作为剪裁形状，并返回一个Modifier对象 。你可以使用这个函数来创建圆形、圆角矩形、椭圆等形状的元素。
- `border`函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的边框效果，它接受三个参数：边框宽度、边框颜色和边框形状，并返回一个Modifier对象 。你可以使用这个函数来给元素添加边框或者描边。
- `size`函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的大小，它接受一个Dp类型或者Dimension类型的参数作为大小，并返回一个Modifier对象 。你可以使用这个函数来给元素指定固定的宽度和高度。
- `padding`函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的内边距，它接受一个Dp类型或者PaddingValues类型的参数作为内边距，并返回一个Modifier对象 。你可以使用这个函数来给元素添加空白区域或者调整位置。
- `width函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的宽度，它接受一个Dp类型或者Dimension类型的参数作为宽度，并返回一个Modifier对象 。你可以使用这个函数来给元素指定固定或者最大或者最小的宽度，或者根据父容器的宽度百分比来设置宽度
- fillMaxSize函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的大小为最大可用空间，它不接受任何参数，并返回一个Modifier对象 。你可以使用这个函数来让元素占满整个屏幕或者父容器。
- colorScheme对象：这个对象是Material Design库提供的一个颜色方案接口，用于获取主题中定义的各种颜色，例如primary、secondary、error等 。你可以使用这个对象来给元素设置颜色，并且可以根据深色模式或浅色模式自动切换颜色。
- CircleShape对象：这个对象是Compose UI库提供的一个形状对象，用于表示一个圆形，它不接受任何参数，并实现了Shape接口 。你可以使用这个对象来给元素设置剪裁或者边框的形状。
- Dp类：这个类是Compose UI库提供的一个密度无关像素的单位类，用于表示可组合函数的尺寸或者间距，它接受一个Float类型的参数作为数值，并提供了一些运算符重载和转换函数 。你可以使用这个类来给元素设置大小或者内边距，并且可以使用.dp扩展属性来将数字转换为Dp类型。

 */

// 定义一个 MainActivity 类，继承自 ComponentActivity
class MainActivity : ComponentActivity() {
    // 重写 onCreate 方法，在 activity 创建时执行
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 使用 setContent 块定义 activity 的布局内容
        setContent {
            // 使用 MyApplicationTheme 应用主题样式
            MyApplicationTheme {
                // 使用 Surface 容器，使用主题中的背景颜色
                Surface(
                    // 使用 fillMaxSize 修饰符使容器填充整个屏幕
                    modifier = Modifier.fillMaxSize(),
                    // 使用 colorScheme.background 获取主题中的背景颜色
                    color = MaterialTheme.colorScheme.background
                ) {
                    // 在容器中调用 Greeting 可组合函数，传入一个 Message 对象作为参数
                    Greeting(Message("1234556","1234564594"))
                }
            }
        }
    }
}

// 定义一个 Message 数据类，包含两个 String 类型的属性：author 和 body
data class Message(val author: String, val body: String)

// 定义一个 Greeting 可组合函数，接受一个 Message 对象和一个 Modifier 对象作为参数
@Composable
fun Greeting(msg: Message, modifier: Modifier = Modifier) {
    // 使用 Row 函数创建一个水平排列的布局
    Row (modifier = Modifier.padding(all = 8.dp)){
        // 使用 colorScheme.secondary 获取主题中的次要颜色
        val secondary = MaterialTheme.colorScheme.secondary
        // 使用 Image 函数创建一个图片元素，使用 painterResource 函数从资源中加载图片
        Image(painter = painterResource(id = R.drawable.ic_launcher_background),
            // 设置图片的内容描述，用于辅助功能，如果图片不是装饰性的，应该提供有意义的描述，否则可以设置为 null
            contentDescription = null,
            // 使用 modifier 参数设置图片的修饰效果，包括大小、剪裁、边框等
            modifier = Modifier
                .size(40.dp) // 设置图片的大小为 40dp x 40dp
                .clip(CircleShape) // 设置图片的剪裁形状为圆形
                .border(1.5.dp, secondary, CircleShape)) // 设置图片的边框宽度为 1.5dp，颜色为次要颜色，形状为圆形

        // 使用 Spacer 函数创建一个空白间隔，设置宽度为 8dp
        Spacer(modifier = Modifier.width(8.dp))

        // 使用 Column 函数创建一个垂直排列的布局
        Column (modifier = Modifier.padding(all = 8.dp)){
            // 使用 Text 函数创建一个文本元素，显示消息的作者，设置颜色为次要容器颜色
            Text(
                text = msg.author,
                color = MaterialTheme.colorScheme.secondaryContainer
            )

            // 使用 Spacer 函数创建一个空白间隔，设置高度为 4dp
            Spacer(modifier = Modifier.height(4.dp))
            // 使用 Text 函数创建一个文本元素，显示消息的内容
            Text(text = msg.body)
        }
    }
}

// 定义一个预览函数，使用 @Preview 注解标记，可以在 Android Studio 中预览可组合函数的效果，而无需运行应用
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    // 在预览中使用 MyApplicationTheme 应用主题样式
    MyApplicationTheme {
        // 在预览中调用 Greeting 可组合函数，传入一个 Message 对象作为参数
        Greeting(Message("1234556","1234564594"))
    }
}

• setContent函数：这个函数是Compose提供的一个顶层函数，用于在Activity中设置布局内容，它接受一个可组合函数作为参数，并将其转换为视图树¹²。你可以使用这个函数来替代XML布局文件，或者在XML布局中嵌入ComposeView³。
• MyApplicationTheme函数：这个函数是在项目中自定义的一个可组合函数，用于应用主题样式，它使用了MaterialTheme函数来创建一个Material Design风格的主题，并且支持深色模式和浅色模式的切换⁴⁵。你可以在这个函数中设置颜色、字体、形状等样式，并且可以通过MaterialTheme对象来访问这些样式。
• Surface函数：这个函数是Material Design库提供的一个可组合函数，用于创建一个具有背景颜色和阴影效果的表面容器，它可以包裹其他的可组合函数，并且可以设置修饰符、形状、边框等属性 。你可以使用这个函数来创建卡片、对话框、抽屉等组件。
• Greeting函数：这个函数是在项目中自定义的一个可组合函数，用于显示一个消息卡片，它接受一个Message对象和一个Modifier对象作为参数，并且使用了Row、Column、Image、Text等可组合函数来创建布局和元素 。你可以修改这个函数来添加更多的功能，例如点击事件、动画效果、状态管理等 。
• Message类：这个类是在项目中自定义的一个数据类，用于封装消息的作者和内容，它包含两个String类型的属性：author和body。你可以使用这个类来创建消息列表或者聊天界面。
• @Composable注解：这个注解是Compose提供的一个编译器注解，用于标记可组合函数，它告诉编译器将这些函数转换为UI元素，并且可以自动响应数据变化 。你必须在所有可组合函数上使用这个注解，并且只能从其他可组合函数中调用它们。
• @Preview注解：这个注解是Compose提供的一个工具注解，用于在Android Studio中预览可组合函数的效果，而无需运行应用或者模拟器 。你必须在不带参数的可组合函数上使用这个注解，并且可以设置一些属性，例如背景颜色、设备类型、字体缩放等。
• Modifier对象：这个对象是Compose提供的一个修饰符接口，用于修改可组合函数的外观和行为，例如大小、颜色、对齐方式、点击事件等 。你可以使用Modifier类中定义的一些扩展函数来创建修饰符对象，并且可以使用.运算符将多个修饰符连接起来。
• Text函数：这个函数是Compose UI库提供的一个可组合函数，用于创建一个文本元素，它接受一个String类型的参数作为文本内容，并且可以设置修饰符、颜色、字体、样式等属性 。你可以使用这个函数来显示标题、段落、标签等文本信息。
• Image函数：这个函数是Compose UI库提供的一个可组合函数，用于创建一个图片元素，它接受一个Painter类型的参数作为图片来源，并且可以设置修饰符、内容描述、缩放类型等属性 。你可以使用这个函数来显示图标、头像、背景等图片资源。
• Row函数：这个函数是Compose Foundation库提供的一个可组合函数，用于创建一个水平排列的布局，它可以包裹多个可组合函数，并且可以设置修饰符、对齐方式、间隔等属性 。你可以使用这个函数来创建横向的列表、导航栏、工具栏等组件。
• Column函数：这个函数是Compose Foundation库提供的一个可组合函数，用于创建一个垂直排列的布局，它可以包裹多个可组合函数，并且可以设置修饰符、对齐方式、间隔等属性 。你可以使用这个函数来创建纵向的列表、卡片、表单等组件。
• Spacer函数：这个函数是Compose Foundation库提供的一个可组合函数，用于创建一个空白间隔，它接受一个Modifier对象作为参数，并且可以设置宽度或者高度等属性 。你可以使用这个函数来调整布局中的元素之间的距离。
• painterResource函数：这个函数是Compose UI库提供的一个顶层函数，用于从资源中加载图片，并返回一个Painter对象，它接受一个Int类型的参数作为资源ID 。你可以使用这个函数来加载drawable或者mipmap目录下的图片文件。
• clip函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的剪裁形状，它接受一个Shape类型的参数作为剪裁形状，并返回一个Modifier对象 。你可以使用这个函数来创建圆形、圆角矩形、椭圆等形状的元素。
• border函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的边框效果，它接受三个参数：边框宽度、边框颜色和边框形状，并返回一个Modifier对象 。你可以使用这个函数来给元素添加边框或者描边。
• size函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的大小，它接受一个Dp类型或者Dimension类型的参数作为大小，并返回一个Modifier对象 。你可以使用这个函数来给元素指定固定的宽度和高度。
• padding函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的内边距，它接受一个Dp类型或者PaddingValues类型的参数作为内边距，并返回一个Modifier对象 。你可以使用这个函数来给元素添加空白区域或者调整位置。
• `width函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的宽度，它接受一个Dp类型或者Dimension类型的参数作为宽度，并返回一个Modifier对象 。你可以使用这个函数来给元素指定固定或者最大或者最小的宽度，或者根据父容器的宽度百分比来设置宽度
• fillMaxSize函数：这个函数是Compose UI库提供的一个修饰符扩展函数，用于设置可组合函数的大小为最大可用空间，它不接受任何参数，并返回一个Modifier对象 。你可以使用这个函数来让元素占满整个屏幕或者父容器。
• colorScheme对象：这个对象是Material Design库提供的一个颜色方案接口，用于获取主题中定义的各种颜色，例如primary、secondary、error等 。你可以使用这个对象来给元素设置颜色，并且可以根据深色模式或浅色模式自动切换颜色。
• CircleShape对象：这个对象是Compose UI库提供的一个形状对象，用于表示一个圆形，它不接受任何参数，并实现了Shape接口 。你可以使用这个对象来给元素设置剪裁或者边框的形状。
• Dp类：这个类是Compose UI库提供的一个密度无关像素的单位类，用于表示可组合函数的尺寸或者间距，它接受一个Float类型的参数作为数值，并提供了一些运算符重载和转换函数 。你可以使用这个类来给元素设置大小或者内边距，并且可以使用.dp扩展属性来将数字转换为Dp类型。

Shape（形状）
通过 Shape，我们可以添加最后的“点睛之笔”。
首先，将消息正文封装在 Surface 可组合项中。
这样即可自定义消息正文的形状和高度。
此外，还要为消息添加内边距，以改进布局。

启用深色主题
启用深色主题（或夜间模式），以避免显示屏过亮（尤其是在夜间），或者只是节省设备电量。
由于支持 Material Design，Jetpack Compose 默认能够处理深色主题。
使用 Material Design 颜色、文本和背景时，系统会自动适应深色背景。
在文件中以单独函数的形式创建多个预览，也可以向同一个函数中添加多个注解。
添加新的预览注解并启用夜间模式。

package com.example.mycompose07

import android.content.res.Configuration
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.mycompose07.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MessageCard(msg = Message("天下第一","冠绝当世"))
                }
            }
        }
    }
}

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

@Composable
fun MessageCard(msg:Message){
    Row(modifier = Modifier.padding(all = 8.dp)) {
       Image(painter = painterResource(id = R.drawable.ic_launcher_background),
           contentDescription = null,
           modifier = Modifier
               .size(40.dp)
               .clip(CircleShape)
               .border(1.5.dp, MaterialTheme.colorScheme.secondary, CircleShape))
        Spacer(modifier = Modifier.width(8.dp))

        Column {
            Text(
                text = msg.author,
                color = MaterialTheme.colorScheme.secondaryContainer,
                style = MaterialTheme.typography.labelSmall
            )

            /*
                 Shape（形状）
                 通过 Shape，我们可以添加最后的“点睛之笔”。
                 首先，将消息正文封装在 Surface 可组合项中。
                 这样即可自定义消息正文的形状和高度。
                 此外，还要为消息添加内边距，以改进布局。
             */
            Spacer(modifier = Modifier.height(4.dp))
            Surface(shape = MaterialTheme.shapes.medium, shadowElevation = 1.dp) {
                Text(
                    text = msg.body,
                    modifier = Modifier.padding(all = 4.dp),
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    }
}

//启用深色主题
/*
     启用深色主题（或夜间模式），以避免显示屏过亮（尤其是在夜间），或者只是节省设备电量。
     由于支持 Material Design，Jetpack Compose 默认能够处理深色主题。
     使用 Material Design 颜色、文本和背景时，系统会自动适应深色背景。
     在文件中以单独函数的形式创建多个预览，也可以向同一个函数中添加多个注解。
     添加新的预览注解并启用夜间模式。
 */

@Preview(name = "Light Mode")
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true,
    name = "Dark Mode")
@Composable
fun PreviewMessageCard() {
    Surface {
        MessageCard(
            msg = Message("Colleague", "Hey, take a look at Jetpack Compose, it's great!")
        )
    }
}