练习：Compose 基础知识
@Composable
fun ComposeArticleApp() {
val img = painterResource(id = R.drawable.bg_compose_background)
ArticleCard(
img, stringResource(R.string.jetpack_compose_tutorial),
stringResource(R.string.short_description), stringResource(id = R.string.compose_long_desc)
)
}
@Composable
private fun ArticleCard(imagePainter: Painter, title: String, shortDescription: String,longDescription:String) {
Column {
//设置图片宽度充满屏幕、高度150dp、缩放模式充满父容器
Image(
painter = imagePainter, contentDescription = null,
contentScale = ContentScale.FillBounds,
modifier = Modifier
.fillMaxWidth()
.height(150.dp)
)
Text(text = title, fontSize = 24.sp, modifier = Modifier.padding(16.dp))
//设置文字两端对齐、距离内边左右16dp
Text(
text = shortDescription,
textAlign = TextAlign.Justify,
modifier = Modifier
.padding(start = 16.dp, end = 16.dp),
)
Text(text = longDescription, textAlign = TextAlign.Justify, modifier = Modifier.padding(16.dp))
}
}
image.png
1.在屏幕上垂直和水平居中对齐所有内容。
2.将第一个 Text 可组合项的字体粗细设为 Bold，top 方向内边距设为 24dp，bottom 方向内边距设为 8dp。
3.将第二个 Text 可组合项的字体大小设为 16sp。
@Composable
fun TaskCompletedScreen() {
val image = painterResource(id = R.drawable.ic_task_completed)
Column(
Modifier
.fillMaxHeight()
.fillMaxWidth(),
verticalArrangement = Arrangement.Center,//子元素垂直居中
horizontalAlignment = Alignment.CenterHorizontally//子元素水平居中
) {
Image(painter = image, contentDescription = null)
Text(
text = stringResource(R.string.all_task_completed),
modifier = Modifier.padding(top = 24.dp, bottom = 8.dp),
fontWeight = FontWeight.Bold
)
Text(
text = stringResource(R.string.nice_work),
fontSize = 16.sp
)
}
}
image.png
这里主要就是看一下weight用法权重
@Composable
fun ComposeQuadrantApp() {
Column(Modifier.fillMaxWidth()) {
Row(Modifier.weight(1f)) {
ComposableInfoCard(
stringResource(R.string.first_title),
stringResource(R.string.first_description),
Color(0xFFEADDFF),
Modifier.weight(1f)
)
ComposableInfoCard(
title = stringResource(R.string.second_title),
description = stringResource(R.string.second_description),
backgroundColor = Color(0xFFD0BCFF),
Modifier.weight(1f)
)
}
Row(Modifier.weight(1f)) {
ComposableInfoCard(
title = stringResource(R.string.third_title),
description = stringResource(R.string.third_description),
backgroundColor = Color(0xFFB69DF8),
modifier = Modifier.weight(1f)
)
ComposableInfoCard(
title = stringResource(R.string.fourth_title),
description = stringResource(R.string.fourth_description),
backgroundColor = Color(0xFFF6EDFF),
modifier = Modifier.weight(1f)
)
}
}
}
@Composable
fun ComposableInfoCard(
title: String, description: String,
backgroundColor: Color,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
.fillMaxSize()
.background(backgroundColor)
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = title, fontWeight = FontWeight.Bold, modifier =Modifier.padding(bottom = 16.dp))
Text(text = description)
}
}
image.png
