最后一个元素在 LazyColumn 中不可见。喷气背包组成

Posted 2023-04-19

【中文标题】最后一个元素在 LazyColumn 中不可见。喷气背包组成

【英文标题】：The last elements are not visible in LazyColumn. Jetpack Compose

【发布时间】：2021-12-05 08:23:00

【问题描述】：

我以this codelab为例

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View 
    return ComposeView(requireContext()).apply 
    setContent 
        //Column(modifier = Modifier.background(Color.LightGray)) 
            //Text(text = "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", modifier = Modifier.weight(1f))
            val scrollState = rememberLazyListState()

            LazyColumn(state = scrollState, modifier = Modifier
                .background(Color.Cyan).fillMaxWidth()) 
                items(100) 
                    Text("Item #$it")
                
            
        //

    
   

但最新元素在我的屏幕上不可见。 P.S 我滚动到最后

在列中添加高度时 - 最后一个元素可见，但 LazyColumn 会延伸到整个高度

LazyColumn(state = scrollState, modifier = 
 Modifier.background(Color.Cyan).fillMaxWidth().height(350.dp))          
   items(100) 
    Text("Item #$it")
   

发生这种情况是因为该列是根元素。好的，在根元素中添加Column()，在根元素中添加LazyColumn()，但我希望LazyСolumn 占据整个高度

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View 
return ComposeView(requireContext()).apply 
    setContent 
        Column(modifier = Modifier.background(Color.LightGray)) 
            val scrollState = rememberLazyListState()

            LazyColumn(state = scrollState, modifier = Modifier
                .background(Color.Cyan).fillMaxWidth()/*.height(350.dp)*/) 
                items(100) 
                    Text("Item #$it")
                
            
        

     
  

最后的元素不可见

理想情况下，我想制作一个带有静态标题的滚动表

更新： 当我在 LazyColumn() 上和下添加 Text() 时，最后的元素也不可见

setContent 
            MaterialTheme 
                Column(modifier = Modifier
                    .background(Color.LightGray)
                    .fillMaxSize()) 
                    Text(text = "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", modifier = Modifier.background(Color.Red).weight(1f)
                    )
                    val scrollState = rememberLazyListState()

                    LazyColumn(
                        state = scrollState,
                        modifier = Modifier
                            .background(Color.Cyan)
                            .fillMaxWidth()
                            .weight(4f)
                    ) 
                        items(100) 
                            Text("Item #$it")
                        
                    
                    Text(text = "!!!!!!!!!!!!!!!!!!!!", modifier = Modifier.background(Color.Red).weight(1f))
                
            

        

【参考方案1】：

用Scaffold 包裹你的LazyColumn 并使用Scaffold 提供的填充值为LazyColumn 设置contentPadding：

Scaffold  paddingValues ->
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = paddingValues
    ) 
      ...
    
 

【参考方案2】：

试试这个：

override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View 
return ComposeView(requireContext()).apply 
    setContent 
        Box(modifier = Modifier.background(Color.LightGray)) 
            val scrollState = rememberLazyListState()

            LazyColumn(state = scrollState, modifier = Modifier
                .background(Color.Cyan).fillMaxSize()) 
                items(100) 
                    Text("Item #$it")
                
            
        

     
  

【讨论】：

感谢您的快速回复，但不适用于我

【参考方案3】：

看起来您的视图底部位于导航栏下方。检查您的活动中是否有此行：

WindowCompat.setDecorFitsSystemWindows(window, false)

如果您不需要将视图放在导航栏下，可以删除此行。

如果你需要它，比如让它透明并在下面放置一些背景视图，你可以使用Accompanist Insets。使用这个库，您可以添加尊重导航/状态栏的填充，例如 Modifier.navigationBarsPadding()：

LazyColumn(
    state = scrollState,
    modifier = Modifier
        .background(Color.Cyan)
        .fillMaxWidth()
        .navigationBarsPadding()
) 
    items(100) 
        Text("Item #$it")
    

【讨论】：

当我在 LazyColum 上和下添加 Text() 时，最后的元素也不可见

@MarkGlushko Modifier.navigationBarsPadding 应该添加到最顶部的容器中，或者添加到列中的最后一个元素中