LazyColumn中的Textfield输入法填充，撰写 [英] TextField IME padding in LazyColumn , Compose

问题描述

问题：文本字段(在惰性列中)文本位于键盘键下方

解释：

我有一个LazyColumn，它包含显示文本字段的项的列表，在清单中，活动有windowSoftInputMode="adjustResize"，我还在setContent之前在onCreate方法中设置了WindowCompat.setDecorFitsSystemWindows(window,false)，我想让文本始终显示在键盘上方，以获得更流畅的编辑体验！

使用提供窗口插图的伴奏者库对Box进行填充

Box(modifier = Modifier.weight(1f).navigationBarsWithImePadding()){
    LazyColumn() {
         items(myItems) { item->
              ItemComposable(item)
         }
    }
}

如您所见，框上有NavigationBarsWithImePadding，但它不起作用，因为文本位于键盘下方，我尝试在LazyColumn上设置修饰符，但它提供了相对于框外其他项的LazyColumn填充！

所以我尝试contentPadding

LazyColumn(contentPadding=insets.ime.toPaddingValues(additionalBottom=insets.navigationBars.bottom.dp)) {
    items(editor.blocks) { block ->
        RenderBlock(block)
    }
}

同样不起作用，因为内容填充应用于最后一项/或之后，键盘位于文本上方

将LazyColumn替换为简单列并使用verticalScroll修饰符会导致相同的问题，因为列表可以是长的垂直滚动成为一种需要

可能的解决方案

val bringIntoViewRequester = remember { BringIntoViewRequester() }

TextField(
  modifier = Modifier
        .fillMaxWidth()
        .bringIntoViewRequester(bringIntoViewRequester),
  value = name,
  onValueChange = {
     name = it
     scope.launch {
        relocationRequestor.bringIntoView()
     }
  }
)

推荐答案

终于有了一个solution。只需执行以下步骤：

第一步：在您的androidManifest.xml中

 <activity
    ...
    android:windowSoftInputMode="adjustResize">
 </activity>

第二步：在您的活动中

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {

        AppTheme {

           ProvideWindowInsets(
               windowInsetsAnimationsEnabled = true,
               consumeWindowInsets = false,
           ) {
              // your content
             }
         }
     }

第三步：

LazyColumn(
  modifier = Modifier
    .navigationBarsWithImePadding()
    .verticalScroll(state = rememberScrollState())
    .height(LocalConfiguration.current.screenHeightDp.dp)
    .fillMaxWidth(),
 ) {
      // your TextField items
   }

第四步：

 // init your CoroutineScope
 val  coroutineScope = rememberCoroutineScope()

 // init your BringIntoViewRequester
 val  bringIntoViewRequester = BringIntoViewRequester()

 // use them in your TextField modifier
 modifier = Modifier
   /* ... your other modifiers*/
    .bringIntoViewRequester(bringIntoViewRequester)
    .onFocusEvent {
        if (it.isFocused || it.hasFocus) {
            coroutineScope.launch {
                delay(250)
                bringIntoViewRequester.bringIntoView()
            }
        }
    }
}

希望它能有所帮助。

这篇关于LazyColumn中的Textfield输入法填充，撰写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！