The last elements are not visible in LazyColumn. Jetpack Compose-CodePudding

I take an example from 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")
                }
            }
        //}

    }
  } 
}

But latest element not visible on my scree. P.S I scrolled to the end

When add height in column - the last elements are visible, but LazyColumn stretches over the entire height

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

This happens because the column is a root element. Ok, Adding Column() in root element and LazyColumn() into in root, but I want the LazyСolumn to take up the entire height

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

     }
  }
}

The last elements are not visible

Ideally I want to make a scrolling table with a static header

UPD: When I add Text() On and Under LazyColumn(), also the last elements are not visible

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

        }

CodePudding user response：

Try this:

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

     }
  }
}

CodePudding user response：

This looks like the bottom of your view is under the navigation bar. Check out if you have this line in your activity:

WindowCompat.setDecorFitsSystemWindows(window, false)

You can remove this line if you don't need to place your views under navigation bar.

If you need it, like to make it transparent and place some background view underneath, you can use Accompanist Insets. With this library you can add padding respectful to navigation/status bar, like with Modifier.navigationBarsPadding():

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