TextField

Compose 中的TextField，是文本输入框控件，样式为Android现有库中的EditText的样式，具体用法中会涉及到状态的使用

TextField 属性列表

属性	作用	示例
value	输入框内容	"hello"
onValueChange	输入框内容改变事件	{ //it 为改变后的文本}
placeholder	hint提示语	"请输入xxxxx"
backgroundColor	背景颜色	Color.Yellow
visualTransformation	输入内容的格式	PasswordVisualTransformation()//密码样式
leadingIcon	前面的图标	{ Icon(Icons.Filled.AccountBox) }
trailingIcon	后面的图标	{ Icon(Icons.Filled.AccountCircle)}
keyboardOptions	暂时不知道怎么用	KeyboardOptions(keyboardType = KeyboardType.Phone, imeAction =ImeAction.Done//ime行为)//设置了没有发现效果

代码实例

class TextFieldActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ShowTextField()
        }
    }

    @Composable
    fun ShowTextField() {
        var text by savedInstanceState { "" }
        TextField(
            value = text,
            onValueChange = {
                text = it
            },//文本改变监听

            modifier = Modifier
                .padding(10.dp)
                .fillMaxWidth(),
//            label = { Text(text = "标签") },//顶部的提示语
            placeholder = { Text(text = "请输入内容") },//hint提示语
            backgroundColor = Color.Yellow,//背景颜色
            visualTransformation = PasswordVisualTransformation(),//输入样式
            leadingIcon = { Icon(Icons.Filled.AccountBox) },//前面的图标
            trailingIcon = {
                Icon(
                    Icons.Filled.AccountCircle,
                    modifier = Modifier.clickable(onClick = {
                        text = ""
                    })
                )
            },//后面的图标
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Phone,
                imeAction = ImeAction.Done//ime行为
            )
        )

    }
}

运行效果：

目前发现此控件在输入第一个字符和删除最后一个字符的时候，控件的高度会发生小距离的变化

Button

Compose 中的Button，对标Button ,是一个具有点击事件的一个控件，跟Android现有库中的Button的区别在于没有文本属性，这是因为，Compose 的设计理念在于组合优于继承，既然你需要显示文本，就给Compose的Button设置一个Text作为子控件就可以了，所以Android现有库中的Button相当于Compose中的Button+Text

Button属性列表

属性	作用	示例
onClick	点击事件	{}
content	button的内容	Text()
contentPadding	内容与边界的距离	PaddingValues(100.dp)
enabled	true	设置按钮是否可用
fontWeight	字体粗细	FontWeight.Medium
shape	设置按钮形状	CutCornerShape(30) 切角形状 /RoundedCornerShape(50)圆角形状
elevation	按钮可点击状态下的阴影	目前Alpha10版本无法正常导包
disabledElevation	按钮不可用状态下的elevation	目前Alpha10版本无法正常导包

代码实例

class ButtonActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ShowButton()
        }
    }

    @Preview
    @Composable
    fun ShowButton() {
        Button(
                onClick = {
                    toast(ButtonActivity::class.java.simpleName)
                },//点击事件
                modifier = Modifier
                        .padding(10.dp)
                        .fillMaxWidth()
                        .background(Color.Transparent),//修饰
                border =
//            BorderStroke(2.dp, Color.White),//边框颜色
                BorderStroke(
                        10.dp,
                        Brush.radialGradient(listOf(Color.White, Color.Black))
                ),//边框颜色 Brush 中的方法对应
                content = { Text(text = "Hell-ppppppppppppppppppppppffffffffffffffpppppp") },//内容
                contentPadding = PaddingValues(100.dp),//当内容过长的时候才会有效，
                enabled = true,//设置按钮是否可用
                shape = CutCornerShape(30), //切角按钮
//            RoundedCornerShape(50),//RoundedCornerShape修改按钮形状 如果参数是dp就是修改角度大小 如果是int是百分比
//        elevation ,按钮可点击状态下的 elevation
//        disabledElevation 按钮不可用状态下的elevation
        )
    }
}

运行效果：

OutlinedButton TextButton 这两个控件目前没有发现与Button有什么区别

Text

Compose 中的Text ，对标TextView

Text属性列表

属性	作用	示例
text	文本内容	"普通文本"
fontSize	字体大小	20.sp
fontFamily	字体	FontFamily.SasSerif
fontStyle	字体样式	FontStyle.Italic（斜体）
fontWeight	字体粗细	FontWeight.Medium
letterSpacing	字符间距	TextUnit.Sp(10)
textAlign	text显示样式	TextAlign.Justify(拉伸填充整个容器)
maxLines	最大显示行数	10
textDecoration	划线样式	TextDecoration.Underline(下划线)，TextDecoration.LineThrough（中划线）
style	text样式	TextStyle.Default
onTextLayout	文本计算完成回调	{}
overflow	文本溢出样式	TextOverflow.Ellipsis

上述属性中text除了可以直接设置一个字符串，还可以通过AnnotatedString类来进行构建文本内容实现一个Text中显示不同大小字体和不同颜色的文本

AnnotatedString代码示例：

AnnotatedString.Builder().run {
                pushStyle(
                    SpanStyle(
                        color = Color.Blue,
                        fontSize = 30.sp,
                        fontStyle = FontStyle.Italic,
                        fontFamily = FontFamily.Cursive
                    )
                )
                append("四大名著")
                pop()//取消上面修改的样式对下文本的影响
                append("水浒传")
                append("三国演义")
                append("红楼梦")
                append("西游记")
                toAnnotatedString()
            }

Text 代码示例：

class TextActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ShowText()
        }
    }

    @Composable
    fun ShowText() {
        Text(
            fontStyle = FontStyle.Italic,//设置字体 Normal 是正常，Italic 斜体
            text = AnnotatedString.Builder().run {
                pushStyle(
                    SpanStyle(
                        color = Color.Blue,
                        fontSize = 30.sp,
                        fontStyle = FontStyle.Italic,
                        fontFamily = FontFamily.Cursive
                    )
                )
                append("四大名著")
                pop()//取消上面修改的样式对下文本的影响
                append("水浒传")
                append("三国演义")
                append("红楼梦")
                append("西游记")
                toAnnotatedString()
            }, //显示的内容
            color = Color.Yellow,   //text颜色
            modifier = Modifier
                .padding(10.dp)
                .fillMaxWidth()
                .height(100.dp)
                .background(color = Color.Red)
                .alpha(1f)
                .clickable(onClick = {
                    toast("hello")
                }),
            fontSize = 20.sp,//字体大小
            fontFamily = FontFamily.SansSerif,//修改字体
            fontWeight = FontWeight.Medium,//修改字重（字体粗细）
            letterSpacing = TextUnit.Sp(10),//字符间距

            textAlign = TextAlign.Justify,//Justify 拉伸填充整个容器， Start Left 左对齐  End  Right 右对齐
            maxLines = 10,//最大行数
            textDecoration = TextDecoration.Underline,//LineThrough 中间划线 Underline 下划线
            style = TextStyle.Default,//text样式
            onTextLayout = {

            },//计算完成回调

            overflow = TextOverflow.Ellipsis

        )

    }
}

效果展示：

Mi8 屏幕指纹版 MIUI12 稳定版（显示效果符合预期）

Mi8 MIUI12 开发版（显示效果FontStyle.Italic,字体倾斜无效）