Android Compose自定義TextField實(shí)現(xiàn)自定義的輸入框

更新時(shí)間：2022年03月02日 10:18:24 作者：安安安安卓

眾所周知Compose中默認(rèn)的TextField和OutlineTextField樣式并不能滿足所有的使用場景，所以自定義TextField就成了必備技能。本文將自定義TextField實(shí)現(xiàn)自定義的輸入框，感興趣的可以了解一下

概覽

眾所周知Compose中默認(rèn)的TextField和OutlineTextField樣式并不能滿足所有的使用場景，所以自定義TextField就成了必備技能，本文就揭露一下自定義TextField的實(shí)現(xiàn)。自定義TextField主要使用BasicTextField實(shí)現(xiàn)。

簡單自定義BasicTextField示例

1.代碼

 var text by remember {
        mutableStateOf("簡單的TextField")
    }
    BasicTextField(
        value = text, onValueChange = {
            text = it
        },
        modifier = Modifier
            .height(40.dp)
            .width(300.dp)
            .background(Color.Green)
    )

2.效果

實(shí)現(xiàn)自定義樣式的BasicTextField

我們知道BasicTextField提供了基礎(chǔ)的輸入框，只包含文字輸入，光標(biāo)等簡單功能，如果我們需要增加樣式就需要自己實(shí)現(xiàn)decorationBox參數(shù)，來添加樣式。

本例中我們實(shí)現(xiàn)一個(gè)帶藍(lán)色邊框，內(nèi)部填充綠色，左側(cè)有圖標(biāo)的自定義BasicTextField。

1.代碼

@Composable
fun DecorateTextField() {
    var text by rememberSaveable {
        mutableStateOf("init")
    }
    Box(
        Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        contentAlignment = Alignment.Center
    ) {
        BasicTextField(
            value = text,
            onValueChange = {
                text = it
            },
            textStyle = TextStyle(color = Color.White),
            cursorBrush = SolidColor(Color.Blue),
            decorationBox = { innerTextField ->//decorationBox內(nèi)部負(fù)責(zé)編寫輸入框樣式
                Row(
                    Modifier
                        .padding(2.dp)
                        .fillMaxWidth()
                        .background(Color.Blue, RoundedCornerShape(percent = 30))
                        .padding(1.dp)
                        .background(Color.Green, RoundedCornerShape(percent = 29)),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(Icons.Default.Star, tint = Color.White, contentDescription = null)
                    Spacer(Modifier.width(5.dp))
                    Box(modifier = Modifier.padding(top = 7.dp, bottom = 7.dp, end = 7.dp)) {
                        innerTextField()//自定義樣式這行代碼是關(guān)鍵，沒有這一行輸入文字后無法展示，光標(biāo)也看不到
                    }
                }
            }
        )
    }
}

2.效果

使用BasicTextField自定義百度輸入框

1.代碼

@Composable
fun BaiduTextField() {
    var text by remember {
        mutableStateOf("安安安安卓")
    }
    BasicTextField(value = text, onValueChange = {
        text = it
    }, decorationBox = { innerTextField ->
        val iconModifier = Modifier.padding(start = 5.dp)
        Row(
            modifier = Modifier
                .padding(horizontal = 5.dp, vertical = 3.dp)
                .fillMaxWidth()
                .height(50.dp)
                .padding(start = 5.dp)
                .border(width = 1.dp, color = Color.Blue, shape = RoundedCornerShape(8.dp))
        ) {
            Box(
                modifier = Modifier
                    .padding(start = 8.dp)
                    .weight(1f)
                    .fillMaxHeight()
                ,
                contentAlignment = Alignment.CenterStart
            ) {
                innerTextField()
            }
            Row(
                modifier = Modifier.fillMaxHeight(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.cha),
                    "",
                    modifier = iconModifier.size(20.dp),
                    tint = Color.Gray
                )
                Icon(
                    painter = painterResource(id = R.drawable.record),
                    "",
                    modifier = iconModifier.size(20.dp),
                    tint = Color.Gray
                )
                Icon(
                    painter = painterResource(id = R.drawable.takepic),
                    "",
                    modifier = iconModifier.padding(end = 8.dp).size(20.dp),
                    tint = Color.Gray
                )
                Box(
                    modifier = Modifier
                        .width(120.dp)
                        .fillMaxHeight()
                        .background(
                            color = Color.Blue,
                            shape = RoundedCornerShape(topEnd = 8.dp, bottomEnd = 8.dp)
                        ).clickable {

                        },
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = "百度一下",
                        color = Color.White
                    )
                }
            }
        }
    })
}

2.效果