前言

　　在学习jetpack compose如何编写ui之前，我认为还是应该先了解与Android studio配合的页面预览@Preview。 这样就可以立刻看到UI效果，从而方便后续学习验证代码。

所需依赖

配合此章博客必须的依赖如下

    implementation "androidx.compose.ui:ui:1.2.1"                       //ui基础库 - 重要
    implementation "androidx.compose.ui:ui-tooling:1.2.1"               //ui工具基础库 - 重要
    implementation "androidx.compose.foundation:foundation:1.2.1"       //基础库 - 重要
    implementation "androidx.activity:activity-compose:1.5.1"           //配合activity使用的基础库 - 重要
    implementation "androidx.compose.ui:ui-tooling-preview:1.2.1"       //在Android studio里预览ui的基础库

简单的初步了解预览

代码

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //将MyText添加到Activity里
            MyText()
        }
    }
    
    @Preview    //在方法上增加@Preview    表明我们需要预览这个方法里的View
    @Composable //在方法上增加@Composable 表面这是compose的ui方法，增加后才能在方法里添加compose的View
    fun MyText(){
        Text(text = "Hello World", color = Color.White)
    }
}

Android studio中的预览

End