nativescript - 如何从 XML 向 Button 添加新行

Question

在我的 NativeScript 项目中，我正在尝试制作一个带有图标的底部栏，然后在其下方添加与其相似的单词。像这样

这是我尝试做的html：

<GridLayout rows="*,60">
    <ScrollView row="0">
        <WrapLayout orientation="horizontal">
            <Label text="There are no leagues currently." style="color: black; text-align: center; font-weight: bold"></Label>
            <Label text="Contact your commissioner" style="color: black; text-align: center; font-weight: bold"></Label>
            <Label text="to create one." style="color: black; text-align: center; font-weight: bold"></Label>
        </WrapLayout>
    </ScrollView>
    <StackLayout row="1" orientation="horizontal">
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf015;\n" class="fa"></Span>
                <Span text="Home"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf000;\n" class="fa"></Span>
                <Span text="All Cocktails"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf005;\n" class="fa"></Span>
                <Span text="Favorite"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf007;\n" class="fa"></Span>
                <Span text="Profile"></Span>
            </FormattedString>
        </Button>
    </StackLayout>
</GridLayout>

这是我的CSS：

.fa {
    font-family: 'Font Awesome 5 Free';
}

但是，每当我尝试这样做时，它都会像这样

我不太确定去哪里，所以任何帮助都会很棒。谢谢！

这是我的代码的一个工作示例：https ://play.nativescript.org/?template=play-ng&id=r8Jodt&v=19

标签： nativescriptnativescript-angular

Answer 1

为 BottomBar 使用 GridLayout，您可以在此处查找操场示例

<GridLayout columns="*,*,*,*" rows="*,*" width="100%" row="1" backgroundColor="lightgray">
  <Label text="&#xf015;" row="0" col="0" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="Home" row="1" col="0" width="100%" textAlignment="center"></Label>
  <Label text="&#xf000;" row="0" col="1" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="All Cocktails" row="1" col="1" width="100%" textAlignment="center"></Label>
  <Label text="&#xf005;" row="0" col="2" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="Favorite" row="1" col="2" width="100%" textAlignment="center"></Label>
  <Label text="&#xf007;" row="0" col="3" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="Profile" row="1" col="3" width="100%" textAlignment="center"></Label>

</GridLayout>