Jetpack Compose:如何将BasicTextField内文本底部对齐并调整Leading Icon大小
问题描述
我想要实现文本及图标位于BasicTextField近底部的效果(参考目标效果示意图),但目前遇到两个问题:
- 不清楚如何将BasicTextField内的文本对齐到底部;
- Leading Icon的默认尺寸过大,导致国家码文本被挤到TextField末尾,想了解缩小Leading Icon尺寸的方法。
当前实现代码
BasicTextField(value = "Country Name", onValueChange = {}, modifier = Modifier .fillMaxWidth() .height(36.dp), interactionSource = interactionSource, enabled =true, singleLine = true, textStyle = TextStyle( textAlign = TextAlign.Center, fontSize = 15.sp ), decorationBox = { innerTextField -> TextFieldDefaults.TextFieldDecorationBox( value = "Country Name", innerTextField = innerTextField, enabled = true, singleLine = true, visualTransformation =VisualTransformation.None, interactionSource = interactionSource, trailingIcon = { Icon( imageVector = Icons.Default.ArrowDropDown, contentDescription = null, tint = Green, modifier = Modifier ) }, colors = TextFieldDefaults.textFieldColors( containerColor = Color.Transparent, focusedIndicatorColor = Green, unfocusedIndicatorColor = Green, textColor = Color.Black ), contentPadding = PaddingValues(vertical = 0.dp) ) }) Row (horizontalArrangement = Arrangement.SpaceBetween,modifier = Modifier.fillMaxWidth()){ BasicTextField( value = countryCode, onValueChange = { countryCode = it }, modifier = Modifier .fillMaxWidth(0.25f) .height(36.dp) , interactionSource = interactionSource, enabled =true, singleLine = true, textStyle = TextStyle( textAlign = TextAlign.End, fontSize = 15.sp ), decorationBox = { innerTextField -> TextFieldDefaults.TextFieldDecorationBox( value = countryCode, innerTextField = innerTextField, enabled = true, singleLine = true, visualTransformation =VisualTransformation.None, interactionSource = interactionSource, leadingIcon = { Icon( imageVector = Icons.Default.Add, contentDescription = null, tint = Color.Gray, modifier = Modifier.size(20.dp) ) }, colors = TextFieldDefaults.textFieldColors( containerColor = Color.Transparent, focusedIndicatorColor = Green, unfocusedIndicatorColor = Green, textColor = Color.Black ), contentPadding = PaddingValues(0.dp) ) } ) BasicTextField( value = phoneNum, onValueChange = { phoneNum = it }, keyboardOptions = KeyboardOptions( imeAction = ImeAction.Done, keyboardType = KeyboardType.Phone ) , modifier = Modifier .fillMaxWidth(0.75f) .height(36.dp) .height(IntrinsicSize.Max), interactionSource = interactionSource, enabled =true, singleLine = true, textStyle = TextStyle( textAlign = TextAlign.End, fontSize = 15.sp ), decorationBox = { innerTextField -> TextFieldDefaults.TextFieldDecorationBox( value = phoneNum, innerTextField = innerTextField, enabled = true, singleLine = true, visualTransformation =VisualTransformation.None, interactionSource = interactionSource, colors = TextFieldDefaults.textFieldColors( containerColor = Color.Transparent, focusedIndicatorColor = Green, unfocusedIndicatorColor = Green, textColor = Color.Black ), contentPadding = PaddingValues(vertical = 8.dp) ) }) }
效果示意图


内容的提问来源于stack exchange,提问作者Tushar Bhatia
相关产品推荐
相关产品推荐

