Android GridLayout中的Nativescript垂直对齐不工作
在nativescript中,我对GridLayout中的StackLayout有一些问题。我无法在StackLayout center垂直对齐标签 以下是我想要实现的一幅图片: 在这里你可以看到,我想要感叹号图标垂直居中 但不幸的是,我一直得到这个: 以下是我使用的代码: tns.htmlAndroid GridLayout中的Nativescript垂直对齐不工作,android,css,mobile,nativescript,Android,Css,Mobile,Nativescript,在nativescript中,我对GridLayout中的StackLayout有一些问题。我无法在StackLayout center垂直对齐标签 以下是我想要实现的一幅图片: 在这里你可以看到,我想要感叹号图标垂直居中 但不幸的是,我一直得到这个: 以下是我使用的代码: tns.html <GridLayout class="formMessage warning" columns="auto,*" rows="auto"> <StackLayout col="0"
<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>
如何修复图标居中?我做错了什么?多谢各位
下面是我将如何改变它,使其发挥作用
<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>
这种布局的优点是,它实际上比使用StackLayout占用的资源更少;并简化您的处理
诀窍是对不打印任何文本的背景使用普通的
标签
(使用.iconbkg类);然后把你的心放在中间!在另一个标签中,它们都位于数据网格的第0列 您可以尝试将verticalAlignment=“center”添加到StackLayout中,也可以尝试将两个列都设置为=“,”而不是“自动”*?尝试在StackLayout中指定标签的高度
当我将verticalAlignment=“center”添加到StackLayout中时,左侧部分不会填充红色,只需将其挤压到中心即可,使用图标。所以它将居中,而不仅仅是图标。我将尝试添加图标的高度,谢谢,我们将看到它。(此外,如果我向StackLayout添加了指定的高度,则问题会消失,但它应该是动态的,取决于lorem ipsum标签。最小高度没有帮助。:()添加图标(标签)的高度没有帮助。:(非常感谢,这是一个非常聪明的方法来解决这个问题!我的工作非常完美。是的,从那时起,框架已经修复了很多类似的问题。vertical align
现在应该可以正常工作了。。。
<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>
.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;
}