效果

代码

/**
* @param hint: 空字符时的提示
* @param startIcon: 左侧图标; -1 则不显示
* @param iconSpacing: 左侧图标与文字的距离; 相当于: drawablePadding
*/
@Composable
fun CustomEdit(
text: String = "",
onValueChange: (String) -> Unit,
modifier: Modifier,
hint: String = "请输入",
@DrawableRes startIcon: Int = -1,
iconSpacing: Dp = 6.dp,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = TextStyle.Default,
keyboardOptions: KeyboardOptiOns= KeyboardOptions.Default,
keyboardActions: KeyboardActiOns= KeyboardActions.Default,
visualTransformation: VisualTransformation = VisualTransformation.None,
cursorBrush: Brush = SolidColor(MaterialTheme.colorScheme.primary)
) {
// 焦点, 用于控制是否显示 右侧叉号
var hasFocus by remember { mutableStateOf(false) }
BasicTextField(
value = text,
OnValueChange= onValueChange,
modifier = modifier.onFocusChanged { hasFocus = it.isFocused },
singleLine = true,
enabled = enabled,
readOnly= readOnly,
textStyle = textStyle,
keyboardOptiOns= keyboardOptions,
keyboardActiOns= keyboardActions,
visualTransformation = visualTransformation,
cursorBrush = cursorBrush,
decoratiOnBox= @Composable { innerTextField ->
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
// -1 不显示 左侧Icon
if (startIcon != -1) {
Image(painter = painterResource(id = startIcon), cOntentDescription= null)
Spacer(modifier = Modifier.width(iconSpacing))
}
Box(modifier = Modifier.weight(1f)) {
// 当空字符时, 显示hint
if (text.isEmpty())
Text(text = hint, color = Color.Gray, style = textStyle)
// 原本输入框的内容
innerTextField()
}
// 存在焦点 且 有输入内容时. 显示叉号
if (hasFocus && text.isNotEmpty()) {
Icon(imageVector = Icons.Filled.Clear, // 清除图标
cOntentDescription= null,
// 点击就清空text
modifier = Modifier.clickable { onValueChange.invoke("") })
}
Icon(
imageVector = Icons.Filled.Search,
cOntentDescription= null,
modifier = Modifier
.padding(start = 10.dp)
)
}
}
)
}


使用

CustomEdit(
text = searchText,
OnValueChange= {
searchText = it
},
hint = "搜索应用",
modifier = Modifier
.fillMaxWidth()
.padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 10.dp)
.height(50.dp)
.background(Color(0xBCE9E9E9), shape = MaterialTheme.shapes.medium)
.padding(horizOntal= 16.dp),
textStyle = Typography.bodyMedium,
keyboardOptiOns= KeyboardOptions(keyboardType = KeyboardType.Text),
)