最后一个元素在 LazyColumn 中不可见。 Jetpack Compose

Question

我从此 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))
                }
            }

        }

Answer 1

用

LazyColumn

包裹

Scaffold

，并使用

contentPadding

提供的填充值设置

LazyColumn

为

Scaffold

：

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

Answer 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")
                }
            }
        }

     }
  }
}

Answer 3

更换：

val scrollState = rememberLazyListState()

与：

val scrollState = rememberLazyListState(99 /*or use (list.size - 1) if you have a list in you LazyColumn */)

非常适合我。

Answer 4

您可以将以下

systemBarsPadding

添加到LazyColumn的修饰符中。

我想这与制作全屏活动有关。

LazyColumn(
    modifier = Modifier.systemBarsPadding().fillMaxSize(),
) {
  ...
}

此外，它还可以添加弗拉迪斯拉夫所说的支架。

Answer 5

不理想，但完成工作：

在末尾添加一个空文本元素

LazyColumn(){
items(yourdata){
 // 
}
item{
  Text("")
}
}

Answer 6

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

WindowCompat.setDecorFitsSystemWindows(window, false)

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

如果您需要它，例如使其透明并在下面放置一些背景视图，您可以使用伴奏插图。使用此库，您可以添加尊重导航/状态栏的填充，例如使用

Modifier.navigationBarsPadding()

:

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