JetpackCompose

215 阅读1分钟

UI

Jetpack compose Box + Colum(垂直) + Row(水平)

@Preview
@Composable
fun MySetting() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .background(Colors.white)
    ) {
        Column {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Colors.white)
                    .height(50.dp)
            ) {
                Icon(
                    modifier = Modifier
                        .align(alignment = Alignment.TopStart)
                        .size(48.dp)
                        .padding(14.dp),
                    painter = painterResource(id = R.drawable.ic_back), contentDescription = "返回"
                )
                Text(
                    modifier = Modifier
                        .align(alignment = Alignment.Center),
                    text = "这是标题",
                    color = Colors.blue,
                    fontSize = 18.sp,
                    textAlign = TextAlign.Center
                )
                Text(
                    modifier = Modifier
                        .align(alignment = Alignment.CenterEnd)
                        .padding(end = 14.dp),
                    text = "确定",
                    color = Colors.red,
                    fontSize = 18.sp,
                    textAlign = TextAlign.Center
                )

            }
            Divider(color = Colors.diver_bg, thickness = 0.5.dp)

            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .background(Color.White)
                    .clickable {

                    }
            ) {
                Spacer(modifier = Modifier.width(16.dp))
                Text(
                    text = "我的积分",
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                        .weight(1f),
                    color = Colors.text_h1
                )
                Icon(
                    painter = painterResource(id = R.drawable.ic_arrow_right),
                    contentDescription = "",
                    modifier = Modifier
                        .size(20.dp)
                        .align(Alignment.CenterVertically),
                    tint = Colors.text_h2
                )
                Spacer(modifier = Modifier.width(16.dp))
            }
            Divider(color = Colors.diver_bg, thickness = 0.5.dp)

            Spacer(
                modifier = Modifier
                    .height(22.dp)
                    .fillMaxWidth()
                    .background(Colors.space_bg)
            )

            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .background(Color.White)
                    .clickable {

                    }
            ) {
                Spacer(modifier = Modifier.width(16.dp))
                Text(
                    text = "我的收藏",
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                        .weight(1f),
                    color = Colors.text_h1
                )
                Icon(
                    painter = painterResource(id = R.drawable.ic_arrow_right),
                    contentDescription = "",
                    modifier = Modifier
                        .size(20.dp)
                        .align(Alignment.CenterVertically),
                    tint = Colors.text_h2
                )
                Spacer(modifier = Modifier.width(16.dp))
            }
            Divider(color = Colors.diver_bg, thickness = 0.5.dp)
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .background(Color.White)
                    .clickable {

                    }
            ) {
                Spacer(modifier = Modifier.width(16.dp))
                Text(
                    text = "我的金币",
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                        .weight(1f),
                    color = Colors.text_h1
                )
                Icon(
                    painter = painterResource(id = R.drawable.ic_arrow_right),
                    contentDescription = "",
                    modifier = Modifier
                        .size(20.dp)
                        .align(Alignment.CenterVertically),
                    tint = Colors.text_h2
                )
                Spacer(modifier = Modifier.width(16.dp))
            }
            Divider(color = Colors.diver_bg, thickness = 0.5.dp)
        }
    }

}