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

我得到的结果:

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

Answer 1

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

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

Bootstrap 在 CSS 类 .btn 上做到了这一点，因此以 Angular 为例，您可以创建一个 Angular 组件。