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

Question

我以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))
                }
            }

        }

Answer 1

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

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

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

WindowCompat.setDecorFitsSystemWindows(window, false)

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

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

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