Nativescript：带有图标和多行标题的按钮

Question

我想实现按钮看起来与下图完全一样：

这是我正在使用的按钮的 XML：

<Button class="footer-button" loaded="onLoad" textWrap="true">
    <FormattedString>
        <Span id="icon" class="footer-button-icon"/>
        <Span id="text" class="footer-button-text"/>
    </FormattedString>
</Button>

这是sass风格：

.footer-button {
    text-transform: uppercase;
    color: #fff;
    background-color: $colorAccent;
    height: 40;
    border-radius: 50%;
    font-size: 14;
    margin: 16 0;
    padding: 0 10;

    .footer-button-icon {
        @include fontIcons;
            font-size: 18;
        }
        .footer-button-text {
            @include fontMainText;
        }
    }    
}

我得到的结果：

我知道我可以通过制作自定义视图（例如网格布局内的 2 个标签）来获得我想要的东西，但我想知道它是否可以通过按钮和格式化字符串或通过调整本机 ios 和 android 按钮属性来实现。

Answer 1

抱歉，这是不可能的，因为 NativeScript 中的按钮只接受文本或格式化字符串，并且您只能在颜色或字体（字体大小等）等文本上应用样式，而不能在文本位置、边距等上应用样式。

对于您的解决方案，最好有一个具有按钮行为的新组件

Bootstrap 是在带有 CSS class.btn 的 a 上完成的，因此以 Angular 为例，你制作了一个 Angular 组件。