compose基础页面

打开android Studio

这里能选择当前的目录

Compose会在ui/theme生成4个文件

• Color.kt:颜色

• Shape:kt:形状

• Theme.kt:主题

• Type.kt:字体

简单的欢迎界面

可以到Color管理自定义颜色

然后在MainActivity写页面

先上背景

@Composable
fun WelcomePage() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Mypink)
    ) {
        Image(
            bitmap = ImageBitmap.imageResource(id = R.drawable.mo1),
            contentDescription = "",
            // 裁剪居中
            contentScale = ContentScale.Crop,
            //透明
            alpha = 0.7f,
            modifier = Modifier
                .fillMaxSize()
        )
//接下来写的布局
      WelcomeButton()


    }

}

背景

布局

@Composable
fun WelcomeContent(){
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        Spacer(modifier = Modifier.height(800.dp))
        WelcomeTitle()
        Spacer(modifier = Modifier.height(20.dp))
        WelcomeButton()
    }
}

标题

@Composable
fun WelcomeTitle(){
    Box(
        //居中
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
    ) {
        Text(text="我是标题",
            textAlign = TextAlign.Center,
            style= TextStyle(
                fontSize= 60.sp,
                fontWeight= FontWeight.Bold,//字体粗细
                fontStyle = FontStyle.Italic
                )
        )
    }

}

按钮

@Composable
fun WelcomeButton(){
    Button(onClick = { /*TODO*/ }, modifier = Modifier
        .width(400.dp)
        .height(70.dp)) {
        Text(text = "我是圆形按钮", fontSize = 30.sp)

    }
    Spacer(modifier = Modifier.height(10.dp))
    TextButton(onClick = { /*TODO*/ }) {
        Text(text = "文字按键", fontSize = 30.sp, color = Pink80)
    }

}

渲染

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    WelcomePage()
}

最终效果