GridLayout中的Nativescript垂直对齐不起作用

Posted 2023-02-19

【中文标题】GridLayout中的Nativescript垂直对齐不起作用

【英文标题】：Nativescript vertical alignment in GridLayout not working

【发布时间】：2017-02-21 21:01:29

【问题描述】：

在 nativescript 中，我对 GridLayout 中的 StackLayout 有一些问题。我无法在 StackLayout 中心垂直对齐标签。

这是我想要实现的图片：

在这里你可以看到，我希望感叹号图标垂直居中。

但不幸的是，我不断收到这个：

这是我使用的代码：

tns.html

<GridLayout class="formMessage warning" columns="auto,*" rows="auto">
  <StackLayout col="0" class="formMessageIcon">
    <Label class="icon fa" [text]="'fa-exclamation-circle' | fonticon"></Label>
  </StackLayout>
  <Label col="1" class="formMessageText" text="lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet" textWrap="true"></Label>
</GridLayout>

CSS

.formMessage 
  width: 100%;
  border-width: 2;
  border-color: #ff344e;


.formMessageIcon 
  background-color: #ff344e;
  width: 30;


.icon 
  vertical-align: center;
  text-align: center;
  margin-right: 2;
  font-size: 18;
  color: #2b3535;


.formMessageText 
  padding: 5 8;
  color: #ff344e;

如何解决图标居中问题？我做错了什么？非常感谢！

【问题讨论】：

您可以尝试将 verticalAlignment="center" 添加到 StackLayout 中，并尝试将这两个列都设为“,”而不是 auto,* 吗？

尝试在StackLayout内指定Label的height

当我将verticalAlignment="center" 添加到StackLayout 时，左边部分不会被红色填充，只需用图标将其挤压到中心即可。所以它将居中，但不仅仅是图标。我将尝试添加图标的高度，谢谢，我们会看到它。 （此外，如果我向 StackLayout 添加指定的高度，那么问题就会消失，但它应该是动态的，具体取决于 lorem ipsum 标签。Min-height 没有帮助。:()

添加图标（标签）的高度没有帮助。 :(

【参考方案1】：

这是我将如何改变它以使其工作..

<GridLayout class="formMessage warning" columns="auto,*" rows="auto">
    <Label col="0" class="iconbkg" text=""></Label>
    <Label col="0" class="icon fa" [text]="'fa-exclamation-circle' | fonticon"></Label>
    <Label col="1" class="formMessageText" text="lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet" textWrap="true"></Label>
</GridLayout>

CSS 是：

.formMessage 
    width: 100%;
    border-width: 2;
    border-color: #ff344e;


.iconbkg 
    width: 30;
    background-color: red;
    margin-right: 2;


.icon 
    width: 30;
    vertical-align: center;
    text-align: center;
    margin-right: 2;
    font-size: 18;
    color: #2b3535;


.formMessageText 
    padding: 5 8;
    color: #ff344e;

这种布局的优点是它实际上比使用 StackLayout 占用更少的资源；并简化您的处理。

诀窍是使用普通的Label 作为不打印任何文本的背景（使用 .iconbkg 类）；然后居中你的！在另一个Label 中，它们都在数据网格的第 0 列中。

【讨论】：

非常感谢，这是一个非常聪明的方法来解决这个问题！我工作得很好。

是的，从那时起，该框架已经修复了很多这样的问题。 vertical-align 现在应该可以正常工作了...