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()
}
最终效果
compose基础页面
http://www.404np.com:8080/archives/1720332216404