如何在 LazyColumn Jetpack Compose 中的项目之间添加分隔线？

Question

我有一个如下所示的 LazyColumn：

exports.createPages = async ({ actions, graphql, reporter }) => {
  const result = await graphql(`
    {
      allWpPage {
        nodes {
          __typename
          id
          databaseId
          uri
        }
      }
    }
  `)
  if (result.errors) {
    reporter.error("There was an error fetching pages", result.errors)
  }
  const { allWpPage } = result.data
  const pageTemplate = require.resolve(`./src/templates/WpPage.js`)
  if (allWpPage.nodes.length) {
    allWpPage.nodes.map(page => {
      actions.createPage({
        path: page.uri,
        component: pageTemplate,
        context: page,
      })
    })
  }
  const result2 = await graphql(`
    {
      allWpPost {
        nodes {
          __typename
          id
          databaseId
          uri
        }
      }
    }
  `)
  if (result2.errors) {
    reporter.error("There was an error fetching posts", result.errors)
  }
  const { allWpPost } = result2.data
  const postTemplate = require.resolve(`./src/templates/WpPost.js`)
  if (allWpPost.nodes.length) {
    allWpPost.nodes.map(post => {
      actions.createPage({
        path: post.uri,
        component: postTemplate,
        context: post,
      })
    })
  }
}

如何在列表中的每个项目之间添加一行，类似于在旧的 RecyclerView 上使用项目装饰？

Answer 1

目前使用 1.0.0（使用 1.0.0-beta07 测试）您只需在 Divider 中添加一个 LazyListScope。

类似于：

   LazyColumn(
        verticalArrangement = Arrangement.spacedBy(12.dp),
    ) {
        items(itemsList){
            Text("Item at  $it")
            Divider(color = Color.Black)
        }
    }

如果您想避免最后一项中的 Divider，您可以使用：

   LazyColumn(
        verticalArrangement = Arrangement.spacedBy(12.dp),
    ) {
        itemsIndexed(itemsList) { index, item ->
            Text("Item at index $index is $item")
            if (index < itemsList.size-1)
                Divider(color = Color.Black, thickness = 1.dp)
        }

    }

Answer 2

简单：

LazyColumn (
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    items(bookList) { book ->
        InProgressBookItem(book = book)
        Divider(color = Color.Black, thickness = 1.dp)
    }
}