You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.01 07:44:55