GridLayout中的Nativescript垂直对齐无法正常工作

Question

在nativescript中，StackLayout存在GridLayout中的问题。我无法在StackLayout中心垂直对齐Label。

这是我希望获得的图片：

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

但不幸的是我一直这样：

以下是我使用的代码：

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;
}

如何修复图标居中？我做错了什么？非常感谢你！

Answer 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类）;然后集中你的！在数据网格的第0列中的两个Label中。