如何在平面列表中的项目之间添加间隙？

Question

我想使用 flatlist 在 React Native 中添加一些间距，但目前看来比应有的更困难。

事实证明，React Native 不支持gap属性，这使得事情变得非常复杂。

我通过使项目变宽来解决水平间距，49.5%这意味着我有1%水平空间，现在我如何对垂直间距做同样的事情？

最重要的是，我如何确保水平和垂直“间隙”相等。

const renderItem = ({ item }) => (
  <Pressable onPress={() => alert(item.name)} style={{
        aspectRatio: 1,
    width: "49.5%",
    position: "relative",
  }}>
    <Image
      style={{
        width: "100%",
        height: "100%"
      }}
      source={{
        uri: item.url,
      }}
    />
    <View
      style={{
        position: "absolute",
        zIndex: 3,
        bottom: 0,
        paddingHorizontal: 2,
        paddingVertical: 8,
        flexDirection: "row",
        // justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text style={{ color: "white", fontSize: 16 }}>{item.name}</Text>
    </View>
  </Pressable>
);

export default function App() {
  return       <FlatList
        numColumns={2}
        data={people}
        renderItem={renderItem}
        columnWrapperStyle={{
          justifyContent: "space-between"
        }}       
      />
}

Answer 1

更新

正如Antonio Jaime 在他的回答中所说，自从 2023 年 1 月发布 RN 0.71 以来，有一种更聪明、更直接的方法来做到这一点：gap在contentContainerStyle和 中columnWrapperStyle。请检查一下。

上一个答案

您可以使用组件ItemSeparatorComponent的属性FlatList来制作垂直间隙。此属性是在每个项目之间呈现的组件FlatList，但不在顶部、底部、右侧或左侧。您可以在文档中阅读更多相关信息。

将其更改FlatList为：

<FlatList
  numColumns={2}
  data={people}
  renderItem={renderItem}
  ItemSeparatorComponent={() => <View style={{height: 20}} />}
  /* that is not necessary anymore
columnWrapperStyle={{
    justifyContent: "space-between"
  }} */      
/>

为了使水平空间的大小与垂直空间的大小相同，您可以使用以下方法将一列从另一列移开padding：

• 左边的项目的paddingRight大小是垂直空间的一半。
• 右边的得到paddingLeft代替paddingRight。

这是代码：

const renderItem = ({ item, index }: Props) => (
  <View
    style={[
      {
        aspectRatio: 1,
        flexGrow: 1,
        width: "50%",
        position: "relative",
      },
      index % 2 === 0
      ? {
        paddingRight: 10,
      } : {
        paddingLeft: 10
      }
    ]}
  >
    <Pressable
      onPress={() => alert(item.name)}
    >

几点：

• 创建父View组件是因为如果 Pressable 具有该padding属性，则垂直间隙也将是可按下的。
• 不要忘记设置，width: '50%'因为这会使图像占据屏幕宽度的一半。
• 两侧应获得相同的填充值，因为这对于使间隙居中非常重要。
• 您应该使用padding而不是margin因为width仍然是50%，所以边距会将元素推到屏幕的右边缘之外。如果您使用更大的值，例如40代替10和margin代替，padding您就会看到问题。

这就是视觉结果。

PS：我在我的机器上运行了你的应用程序，并使用了我在 Unsplash 上获得的一些 URL 图像，它起作用了：垂直间隙是由 ItemSeparatorComponent 创建的。

PS 2：我对代码做了一些更改，现在水平和垂直间隙的大小相等。结果就是这样。另外，我改变了我的答案。

Answer 2

如果您使用 RN >=0.71 并且希望更好地控制列和项目之间的间距，您还可以使用和的gap样式属性，如下所示：contentContainerStylecolumnWrapperStyle

<FlatList
  // 
  contentContainerStyle={{ gap: GAP_BETWEEN_ROWS }}
  columnWrapperStyle={{ gap: GAP_BETWEEN_COLUMNS }}
  numColumns={2}
  // 
  data={data}
  renderItem={renderItem}
/>

Answer 3

处理ItemSeparatorComponent空间between rows，但不处理列之间的空间。由于我们有两列，因此我们可以通过将其作为 a 添加到所有具有 的元素FlatList来创建与两列之间提供的相同空间。ItemSeparatorComponentmarginRightodd index

<FlatList
   numColumns={2}
   data={people}
   ItemSeparatorComponent={() => <View style={{height: 10}} />}
   renderItem={({index, item}) =>  (
        <Pressable onPress={() => alert(item.name)} style={{
             aspectRatio: 1,
             width: "49.5%",
             marginRight: index % 2 !== 0 ? 0 : 10,             
             position: "relative",
        }}>
            ...

         </Pressable>})
/>

关键部分是marginRight: index % 2 !== 0 ? 0 : 10渲染函数中每个项目的父视图。