項目實戰中用compose還不是很習慣,感覺寫界面比xml還費勁,是不是我打開方式不對。
這次分享下搜索界面
一、先看下效果圖
二、解決方案分析
看似簡單,實則還是有丟丟難度的。比如後面的刪除圖片要隨着內容是否存在而顯示。
三、代碼如下:
@Composable
fun SearchBar(onBack: () -> Unit, searchUID: (String) -> Unit) {
var value by rememberSaveable { mutableStateOf("") }
val context = LocalContext.current
Row(
modifier = Modifier
.padding(top = 12.dp)
.fillMaxWidth()
.statusBarsPadding()
.height(43.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
) {
Spacer(modifier = Modifier.size(width = 17.dp, height = 1.dp))
MyIconButton(
onClick = {
onBack()
},
) {
Icon(
painter = painterResource(id = R.mipmap.ic_back),
contentDescription = "返回"
)
}
Spacer(modifier = Modifier.size(width = 17.dp, height = 1.dp))
Row(
modifier = Modifier
.weight(1f)
.fillMaxWidth()
.height(36.dp)
.background(
color = colorResource(id = R.color.color_F6),
shape = RoundedCornerShape(22.dp)
),
verticalAlignment = Alignment.CenterVertically,
) {
Image(
modifier = Modifier
.padding(start = 12.dp, end = 2.dp)
.size(16.dp, 16.dp),
painter = painterResource(id = R.mipmap.ic_uid_search),
contentDescription = "搜索",
contentScale = ContentScale.Crop
)
Box(
modifier = Modifier
.fillMaxWidth(),
contentAlignment = Alignment.CenterStart
) {
if (value.isEmpty()) {
Text(
text = stringResource(id = R.string.search_uid_hint),
fontSize = 14.sp,
color = colorResource(id = R.color.color_AEAEB2),
modifier = Modifier.padding(5.dp)
)
} else {
Row(
modifier = Modifier.fillMaxSize(),
horizontalArrangement = Arrangement.End,
verticalAlignment = Alignment.CenterVertically
) {
Image(
painterResource(id = R.mipmap.ic_uid_search_del),
contentDescription = "",
modifier = Modifier
.padding(end = 5.dp)
.clickable {
value = ""
}
.size(16.dp)
)
}
}
val requester = FocusRequester()
LaunchedEffect(Unit) {
requester.requestFocus()
}
BasicTextField(
value = value,
onValueChange = { value = it },
maxLines = 1,
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Characters,
keyboardType = KeyboardType.Email,
autoCorrect = true,
imeAction = ImeAction.Search
),
keyboardActions = KeyboardActions(onSearch = {
searchUID(value)
}),
singleLine = true,
cursorBrush = SolidColor(MaterialTheme.colors.primary),
textStyle = TextStyle(color = colorResource(id = R.color.color_1C1C1E), fontSize = 14.sp),
modifier = Modifier
.fillMaxWidth()
.padding(start = 5.dp, end = 45.dp)
.focusRequester(requester)
)
}
}
Spacer(modifier = Modifier.size(width = 16.dp, height = 1.dp))
Text(
modifier = Modifier
.wrapContentWidth(Alignment.End)
.clickable(
interactionSource = MutableInteractionSource(),
indication = null
) {
searchUID(value)
},
text = stringResource(id = R.string.search),
color = colorResource(id = R.color.color_556FF6),
fontSize = 16.sp
)
Spacer(modifier = Modifier.size(width = 16.dp, height = 1.dp))
}
}
完整代碼如上,還有問題的可私信我