自定义搜索框

/**
 * 自定义搜索框
 *  onSearchCompleted  搜索完成回调
 *  colorBorder 边框线的颜色
 */
@Composable
fun SetCustomEditView(onSearchCompleted: ((String) -> Unit?)?,
                      colorBorder: Color) {
    val keyboardController = LocalSoftwareKeyboardController.current
    val keyboardActions = KeyboardActions(
        onDone = {
             keyboardController?.hide()
            onSearchCompleted?.invoke(searchHisText)
        }
    )

    val textStyle = TextStyle(color = colorResource(id = R.color.xxx), fontSize = 14.sp)
    val onValueChange: (String) -> Unit = {
        searchHisText = it
        if (it.isEmpty()) {
            callItemClick()
        }
    }

    BasicTextField(
        value = searchHisText,
        onValueChange = onValueChange,
        modifier = if (hasFocus) { //有焦点处边框改变
            Modifier
                .fillMaxWidth()
                .height((43 * MainApplication.GlobalDpData.scale).dp)
                .background(
                    colorResource(id = R.color.xxx),
                    shape = MaterialTheme.shapes.extraLarge
                )
                .border(
                    width = 0.dp,
                    color = colorResource(id = R.color.xxx),
                    shape = MaterialTheme.shapes.extraLarge
                )
                .onFocusChanged { hasFocus = it.isFocused }
        } else {
            Modifier
                .fillMaxWidth()
                .height((43 * MainApplication.GlobalDpData.scale).dp)
                .background(
                    colorResource(id = R.color.xxxx),
                    shape = MaterialTheme.shapes.extraLarge
                )
                .border(width = 0.dp, color = colorBorder, shape = MaterialTheme.shapes.extraLarge)
                .onFocusChanged { hasFocus = it.isFocused }
        },
        singleLine = true,
        enabled = enabled,
        readOnly = false,
        textStyle = textStyle,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
        keyboardActions = keyboardActions,
        visualTransformation = VisualTransformation.None,
        cursorBrush = SolidColor(colorResource(id = R.color.xxxx)),
        decorationBox = @Composable { innerTextField ->
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                //搜索图标 search_img
                Icon(
                    painter = painterResource(id = R.drawable.search_img),
                    modifier = Modifier
                        .padding(
                            start = (10 * MainApplication.GlobalDpData.scale).dp,
                            end = (5 * MainApplication.GlobalDpData.scale).dp
                        )
                        .size((18 * MainApplication.GlobalDpData.scale).dp),
                    contentDescription = null,
                    tint = colorResource(id = R.color.xxxxx)
                )

                //输入内容
                Box(modifier = Modifier.weight(1f)) {
                    if (searchHisText.isEmpty()) {
                        Text(
                            text = stringResource(id = R.string.search_hint),
                            color = colorResource(id = R.color.xxxx),
                            style = textStyle
                        )
                    }
                    innerTextField()
                }

                //清除内容的x图标 R.mipmap.search_clear
                if (hasFocus && searchHisText.isNotEmpty()) {
                    Icon(
                        painter = painterResource(id = R.mipmap.search_clear),
                        modifier = Modifier
                            .padding(end = (8 * MainApplication.GlobalDpData.scale).dp)
                            .size((16 * MainApplication.GlobalDpData.scale).dp)
                            .clickable {
                                onValueChange.invoke("")
                            },
                        contentDescription = null,
                        tint = colorResource(id = R.color.xxx)
                    )
                }
            }
        }
    )
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值