Последние элементы не видны в LazyColumn. Jetpack Compose

Я беру пример из этой кодовой лаборатории

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

    }
  } 
}

Но последний элемент не виден на моей осыпи. PS прокрутил до конца

При добавлении высоты в столбец - видны последние элементы, но 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")
                }
            }
        }

     }
  }
}

Последние элементы не видны

В идеале я хочу сделать таблицу прокрутки со статическим заголовком

UPD: когда я добавляю Text() On и Under LazyColumn(), также не отображаются последние элементы

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

        }

4 ответа

Оберните и установите contentPaddingдля LazyColumnсо значениями заполнения, предоставленными Scaffold:

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

Замена:
val scrollState = rememberLazyListState()
с:
val scrollState = rememberLazyListState(99 /*or use (list.size - 1) if you have a list in you LazyColumn */)
отлично работал для меня.

Попробуй это:

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

     }
  }
}

Похоже, нижняя часть вашего представления находится под панелью навигации. Проверьте, есть ли у вас эта строка в вашей деятельности:

      WindowCompat.setDecorFitsSystemWindows(window, false)

Вы можете удалить эту строку, если вам не нужно размещать представления под панелью навигации.

Если вам это нужно, например, сделать его прозрачным и разместить под ним фоновый вид, вы можете использовать вкладки для аккомпанемента . С помощью этой библиотеки вы можете добавить отступы в строку навигации / состояния, например, с помощью Modifier.navigationBarsPadding():

      LazyColumn(
    state = scrollState,
    modifier = Modifier
        .background(Color.Cyan)
        .fillMaxWidth()
        .navigationBarsPadding()
) {
    items(100) {
        Text("Item #$it")
    }
}
Другие вопросы по тегам