如何从 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

Answer 1

将它们的位置设置为 display:absolute 并且在 class 中它应该是 inline-block。有一些边距应该很容易调整

Answer 2

我会将所有按钮包含在一个 div 中，然后每个按钮和标签组都包含在它自己的 div 中。

<div id='button-row'>
  <div class='bottom-button>
     <button></button>
     <p class='label>Label</p>
  </div>
   <div class='bottom-button>
     <button></button>
     <p class='label>Label</p>
  </div>
  // repeat for your buttons
</div>

你的css：

.button-row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
.bottom-button {
   display: flex;
   flex-direction: column;
   justify-content: center;
   // the font awesome icons are considered text I believe, so 
   text-align: center;
   // would also work
}

这将使行中的所有按钮均匀分布，并将按钮放在标签的顶部。我喜欢使用 flexbox，因为它快速简单，而且移动响应迅速。无论如何我都不是 CSS 专业人士，但它对我有用。

编辑：刚看到您的标记。尝试给格式化字符串 css of .bottom-button 看看是否可行。

Answer 3

BottomBar使用GridLayout，可以找playground示例here

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

Answer 4

这里的实际问题是 \n 仅适用于 JavaScript，而在 HTML (XML) 文件中使用它时，您应该使用字符 
，应该给你换行。

您是否正在尝试为您的 TabView 设置自定义 TabBar？如果是，您可以尝试 nativescript-vector-icons 允许您在 TabBar 上使用字体图标。

Answer 5

For \n 刚刚为 android 工作。使用十六进制代码也不适用于 ios 和 android.

我找到的最终解决方案如下：

（对于 nativescript-vue）

    <Label textWrap="true" col="0" row="0">
      <FormattedString>
        <Span class="number" :text="days" />
        <Span class="format" :text="'\n' + 'Gün'" />
      </FormattedString>
    </Label>

如何从 XML 向 Button 添加新行

How to add new line to Button from XML

nativescript

nativescript-angular