android Compose 第一个UI DEMO

Compose UI 尝试

创建一个 demo

image.png

效果图

image.png

页面主要涉及到的控件Text、BasicTextField、Divider、ClickableText、Button、Checkbox

Text和ClickableText 是文本显示用的，ClickableText 是点击用的。

Text(
           text = "欢迎使用xx管理系统",
          fontSize = 20.sp,
          color = black3,
          modifier = Modifier.padding(20.dp, 50.dp, 0.dp, 60.dp)
  )

ClickableText(text = buildAnnotatedString {
                    withStyle(style = SpanStyle(color = black3, fontSize = 14.sp)) {
                        append("短信验证码登录")
                    }
                }, onClick = {
                    Log.d("xxx", "你已经点到 短信验证码登录")
                })

image.png

BasicTextField 这个是输入框，不用TextField，因为是空白的背景，然后在自定义样式

BasicTextField(
                    value = username,
                    onValueChange = {
                        username = it
                    },
                    singleLine = true,
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(44.dp)
                        .padding(10.dp, 0.dp, 0.dp, 0.dp),
                    textStyle = TextStyle(
                        color = black3
                    ),
                    decorationBox = { innerTextField ->
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .offset(x = 10.dp),
                            contentAlignment = Alignment.CenterStart,
                        ) {
                            if (username.isEmpty()) {
                                Text(
                                    text = "请输入用户名或密码",
                                    fontSize = 12.sp,
                                    color = black9,
                                    modifier = Modifier
                                        .fillMaxWidth()
                                )
                            }
                            innerTextField()
                        }
                    },
                )

hide 功能最难去设置。

Row和Column 的使用，多个顺序就好很多了

image.png

Button 按钮

Checkbox 单选 框
基本的控件都是差不多的属性，特殊属性去功能里面去看，去探索。
Modifier 的使用fillMaxWidth 最大宽度，还有高度，还有高度和宽度一起的。

第一次写用了一天才搞定。点击事件还不易处理。

image.png

最好基本完成了。