列表中项目的水平对齐

Posted 2023-03-05

【中文标题】列表中项目的水平对齐

【英文标题】：Horizontal alignment of items in a list

【发布时间】：2021-05-03 05:16:00

【问题描述】：

我在 react-native 中有一个带有手风琴的列表，是使用 react-native-paper 中的 List 包制作的。它有效，但我想帮助改善审美方面。 正如您在下面的屏幕截图中看到的，对象的数量与其他元素不对齐。同样，但这是一个奖励，我希望标题居中，介于数量和价格之间。这有点复杂，我尝试添加样式，但这并不适用。 我在 list.item 和 list.accordion 中尝试过：

style=justifyContent: 'space-between', alignItems: 'center'

我想知道您能否给我任何线索、建议或您的解决方案。

感谢您的帮助

<List.Section title=item.created_at.substring(0, 10) titleStyle=fontSize: 16, color: '#013243' key=i.toString()>
            <List.Accordion
              title=item.quote_number
              style=width: '98%'
              left=props => <List.Icon ...props color='#F78400' icon=require('../../../assets/images/logo.png') />>
              <List.Item titleStyle=color: '#F78400' title=`Total: $item.amount €`/>
              
                item.items.map((product, i) => (
                  <List.Item
                    title=product.name.substring(0, 30)
                    titleStyle=fontSize: 14
                    description=product.description
                    descriptionStyle=fontSize: 11
                    descriptionNumberOfLines=4
                    key=i.toString()
                    left=()=>(<Text>product.quantity</Text>)
                    right=()=>(<Text>product.cost €</Text>)
                  />
                ))
              
            </List.Accordion>
          </List.Section>

【问题讨论】：

您的列表相互嵌套，这是不好的做法。在 dom 中，它可能看起来像这样 并且高度问题很可能与字体大小有关。因此，您可以使用不同的组件而不是嵌套列表项，或者尝试编辑 元素的边距/填充/字体大小

非常感谢您抽出宝贵的时间来回答，另一方面我们不是html代码而是javascript，没有div / li等。

尝试使用 style=textAlign:'center' 左右 Text

您使用的库将 List 对象转换为 JSX 元素，然后反应将它们呈现为实际的 html。了解代码生成的 html 结构可能很重要。例如，如果您想确保您的网页可访问或允许测试自动化......等等

【参考方案1】：

可以通过将样式应用于 left 和 right 道具来纠正，如下所示：

<List.Item
title=product.name.substring(0, 30)
titleStyle=fontSize: 14
description=product.description
descriptionStyle=fontSize: 11
descriptionNumberOfLines=4
key=i.toString()
left=()=>(<Text style = styles.textStyle>product.quantity</Text>) // styled
right=()=>(<Text style = styles.textStyle>product.cost €</Text>) // styled
/>

const styles = Stylesheet.create(
    textStyle: 
        marginTop: 4, // you may adjust this value according to your requirement
        fontSize: 14,
    

)

【讨论】：

是的，但是 marginTop: 4 取决于容器项目的高度，并且每次都不会给出相同的结果

你是对的@NickPatelidism，但这种样式问题的原因是listitem 'title' 组件的父视图在插件源文件中被硬编码为marginVertical，并且没有可用的道具设置此父元素的样式。这就是为什么我只是将 marginTop: 4 赋予文本元素以使其保持简单。

【参考方案2】：

您可以轻松地在每个项目中添加适当的样式。检查下面的 sn-p。这样，您可以垂直对齐对象的数量，并且标题也居中。

.product 
  width: 500px;
  height: 100px;
  background-color: black;
  color: white;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center

<div class="product">
  <div>1</div>
  <div>Product 1 title</div>
  <div>234.54$</div>
</div>

【讨论】：

非常感谢您抽出宝贵的时间来回答，另一方面我们不是html代码而是javascript，没有div / li等。

我知道它不是 html，但我写这个例子是为了向你展示你可以使用的样式来实现你想要的

是的，谢谢，我关注你并使用'style=justifyContent: 'space-between', alignItems: 'center' '但它不适用

您还必须添加 display: 'flex'。我期待着告诉我结果