Что такое ItemDecoration для Jetpack Compose LazyColumn?

Question

В JetpackCompose мы можем использовать как.

В RecyclerView, чтобы иметь правильные поля / отступы между элементами, нам нужно использовать, как указано в этой статье

Как показано ниже

      class MarginItemDecoration(private val spaceHeight: Int) : RecyclerView.ItemDecoration() {
    override fun getItemOffsets(outRect: Rect, view: View,
                                parent: RecyclerView, state: RecyclerView.State) {
        with(outRect) {
            if (parent.getChildAdapterPosition(view) == 0) {
                top = spaceHeight
            }
            left =  spaceHeight
            right = spaceHeight
            bottom = spaceHeight
        }
    }
}

Для JetpackCompose LazyColumnFor, что эквивалентно ItemDecoration?

Answer 1

С 1.0.0-beta02 вы можете использовать <strong> <tcode id="26581029"></tcode></strong> для добавления интервала между элементами.

Что-то вроде:

      LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp),
) {
    // ...
}

В приведенном ниже примере добавляется пробел между каждым элементом.

До и после:

Если вы хотите добавить отступ по краям содержимого, вы можете использовать contentPadding параметр.

        LazyColumn(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(horizontal = 24.dp, vertical = 8.dp)
  ){ ...  }

В приведенном выше примере первый элемент добавит отступ сверху, последний элемент добавит 8.dp на его дно, и все предметы будут иметь 24.dp обивка слева и справа.

Answer 2

Вы можете использовать LazyColumn с itemsIndexed (ранее LazyColumnForIndexed, не рекомендуется) и примените отступы в зависимости от индекса.

      LazyColumn {
  itemsIndexed(items = ...) { index, item ->
    Box(Modifier.padding(
      start = 16.dp, end = 16.dp, bottom = 16.dp, top = if (index == 0) 16.dp else 0.dp
    ))
  }
}

Answer 3

Учебное пособие взято из лаборатории кода, к которой вы должны обратиться за хорошим планом https://developer.android.com/codelabs/jetpack-compose-layouts?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fjetpack-compose-for-android-developers-1%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fjetpack-compose-layouts#6

      LazyRow(
    modifier = modifier.padding(top = 16.dp, bottom = 16.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(horizontal = 8.dp)
) {
    items(alignYourBodyData) { item ->
        AlignYourBodyElement(
            drawable = item.drawable,
            text = item.text
        )
    }
}

Answer 4

Я своего рода обходной путь, использующий для верхнего, начального и конечного отступов и Spacer в качестве нижнего отступа для всех элементов.

      @Composable
fun MyComposeList(
    modifier: Modifier = Modifier,
    listItems: List<String>,
) {
    LazyColumnFor(
        modifier = modifier, items = listItems,
        contentPadding = PaddingValues(16.dp, 16.dp, 16.dp)
    ) { itemText ->
        ViewItem(
            itemText = itemText
        )
        Spacer(modifier = Modifier.fillMaxWidth().height(16.dp))
    }
}

Кажется, это дает нужный мне результат, так как contentPadding можно прокручивать вместе внутри LazyColumnFor