Android CustomTextField

在 Compose 中开发用户界面时，需要处置惩罚输入框和键盘的交互，例如在键盘弹出时调整布局位置，制止遮挡重要内容。本篇博客将通过一个完整的示例展示怎样实现这一功能。

功能概述

本例实现了一个简单的输入框。当输入框得到焦点或输入笔墨时，以下举动发生：

• 键盘弹出。
  
• 输入框上方的占位符文本根据焦点状态和输入内容动态表现或隐藏。
  
• 整个布局根据键盘的弹出状态主动调整，制止内容被遮挡。
  
• 
  

代码实现

以下是完整代码：

1. @Composable
2. fun BoxAlignmentExample() {
3.     // 设置 Surface 作为背景容器，填充整个屏幕
4.     Surface(
5.         modifier = Modifier
6.             .fillMaxWidth()
7.             .fillMaxHeight(),
8.         color = Color(235, 226, 241) // 设置背景颜色
9.     ) {
10.         // 定义状态变量管理输入框的文本和焦点状态
11.         var textValue by remember { mutableStateOf("") } // 输入框的文本内容
12.         var isTextFieldFocused by remember { mutableStateOf(false) } // 输入框是否聚焦
14.         // 获取焦点管理器和键盘控制器
15.         val focusManager = LocalFocusManager.current
16.         val keyboardController = LocalSoftwareKeyboardController.current
18.         // 动态计算底部间距，键盘弹出时调整布局
19.         val bottomPadding by animateDpAsState(
20.             targetValue = if (isTextFieldFocused || textValue.isNotEmpty()) 50.dp else 0.dp
21.         )
23.         // 使用 Column 布局排列内容
24.         Column(
25.             modifier = Modifier
26.                 .fillMaxSize() // 填充父布局
27.                 .padding(16.dp), // 设置内边距
28.             horizontalAlignment = Alignment.CenterHorizontally, // 水平居中
29.             verticalArrangement = Arrangement.Top // 垂直方向从顶部开始排列
30.         ) {
32.             // 添加一个占位 Spacer，动态调整内容位置
33.             Spacer(modifier = Modifier.weight(1f))
35.             // 使用 Box 包裹输入框和占位符文本
36.             Box {
37.                 // 输入框组件
38.                 TextField(
39.                     value = textValue, // 输入框的当前文本
40.                     onValueChange = { newText ->
41.                         textValue = newText // 更新输入框的文本状态
42.                     },
43.                     modifier = Modifier
44.                         .width(300.dp) // 设置宽度
45.                         .height(50.dp) // 设置高度
46.                         .align(Alignment.Center) // 内容居中对齐
47.                         .border(1.dp, Color.Black, RoundedCornerShape(16.dp)) // 添加圆角边框
48.                         .clip(RoundedCornerShape(16.dp)) // 裁剪为圆角
49.                         .onFocusChanged { focusState ->
50.                             isTextFieldFocused = focusState.isFocused // 更新焦点状态
51.                         },
52.                     keyboardOptions = KeyboardOptions.Default.copy(
53.                         imeAction = ImeAction.Done // 设置键盘操作按钮为 "Done"
54.                     ),
55.                     keyboardActions = KeyboardActions(
56.                         onDone = {
57.                             isTextFieldFocused = false // 失去焦点
58.                             focusManager.clearFocus() // 清除焦点
59.                         }
60.                     )
61.                 )
63.                 // 占位符文本
64.                 Text(
65.                     text = " 请输入文本 ",
66.                     modifier = Modifier
67.                         .align(Alignment.CenterStart) // 文本居左对齐
68.                         .padding(
69.                             start = 20.dp, // 左侧间距
70.                             top = 0.dp,
71.                             end = 0.dp,
72.                             bottom = bottomPadding // 动态调整底部间距
73.                         )
74.                         .background(Color(235, 226, 241)), // 设置背景颜色
75.                     color = Color.Gray // 设置文本颜色
76.                 )
77.             }
79.             // 添加第二个占位 Spacer，确保布局底部有间距
80.             Spacer(modifier = Modifier.weight(2f))
81.         }
82.     }
83. }

复制代码

核心实现

• 状态管理 使用 remember 和 mutableStateOf 管理输入框文本内容 (textValue) 和焦点状态 (isTextFieldFocused)。
  
• 动画结果 借助 animateDpAsState 动态调整布局底部间距 bottomPadding，为界面变化提供平滑过渡。
  
• 输入框的焦点处置惩罚
  
  
  
  • 使用 onFocusChanged 检测输入框的焦点状态，更新 isTextFieldFocused。
    
  • 在键盘输入完成时，通过 focusManager.clearFocus() 和 keyboardController?.hide() 收起键盘。
    
  
  
• 占位符文本逻辑
  
  
  
  • 假如输入框内容为空且未聚焦，表现占位符。
    
  • 根据状态动态调整占位符的表现位置和样式。
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。