Question

我有以下结构：

<Button class="but_border but_text bluebg" flexGrow="1" #lol2>
    <FormattedString>
        <Span text="&#xf230;" fontFamily="FontAwesome, fontawesome-webfont" fontSize="20"></Span>
        <Span text="    Identifícate con Facebook" ></Span>
    </FormattedString>
</Button>

给了我这个：

Screen Capture of the Button

它看起来就像我想要的那样。但我希望我的按钮具有：按下的css状态，背景颜色和字体颜色会有一些变化。

以这种方式使用css执行此操作应该是微不足道的：

.but {
    color: white;
}

.but:pressed {
    color: red;
}

如果我不使用FormattedString，它会起作用，但如果我这样做，它只适用于第一个渲染。之后，它不会在任何事件上发生变化，或者即使我手动更改类或xml或css属性，渲染也永远不会更新。

我正在使用FormattedString，因为这是我知道的唯一方法，以避免Android CAPITALIZING按钮中的所有文本。我已经尝试过使用文本修饰器来避免它，但我只能使用CAPITALIZE，小写或Titleize，但我不能保留原文，除非......我使用的是FormattedString！

我使用FormattedString的另一件事是在文本中嵌入不同的字体（我在这个例子中使用FontAwesome图标）

Answer 1

FormattedString拥有自己的一组属性。

例如，在这种情况下，它是foregroundColor。

Documentation

Answer 2

经过多次尝试将其解决之后，这就是我设法完成任务并继续前进的方法。这仍然不是我正在寻找的答案（遗憾的是）。

我不得不为这个XML替换我的按钮XML：

<GridLayout columns="auto" rows="auto" class="button_grid">
   <Button class="but_border but_text bluebg pressed">
     <FormattedString>
       <Span text="&#xf230;" fontFamily="FontAwesome, fontawesome-webfont" fontSize="20"></Span>
       <Span text="    Identifícate con Facebook" ></Span>
     </FormattedString>
   </Button>
   <Button class="but_border but_text bluebg">
     <FormattedString>
       <Span text="&#xf230;" fontFamily="FontAwesome, fontawesome-webfont" fontSize="20"></Span>
       <Span text="    Identifícate con Facebook" ></Span>
     </FormattedString>
   </Button>
 </GridLayout>

正如您可能注意到的那样，我使用GridLayout将两个相同的按钮重叠在另一个上（使用相同的col和行），然后使用CSS我隐藏顶部按钮：按下状态，并且还添加了一个额外的.pressed类到底部按钮，这样我就可以按照我希望按钮在用户按下按钮时的样式进行设置。

所以我不认为这是一个干净的解决方案，但它仍然是一个解决方案。这将是必须要做的，直到有人提出更好的东西。如果它仍然是这样，我想我应该在Nativescript github上打开一个问题，并且可能尝试使用本机解决方案并制作PR。

我希望这对其他人有用......我将把CSS留在下面：

.button_grid {
    margin: 5;
    flex-grow: 1;
}
.but_text{
    font-size:14
    border-color:rgba(255, 0, 0, 0.0);
    border-width: 1;
    color: white;
    height: 45;
}
.but_border {
    border-radius: 50%;
    border-width: 0;
    border-color: transparent;
    width: 100%;
}
.but_border:pressed {          /* I use this to hide the topmost  */
    visibility: collapse;      /* button on :pressed state        */
}
.but_border.bluebg {
    background-color: #007aff;
}
.but_border.bluebg.pressed {   /* I use this to style the bottom  */
    background-color: #004999; /* button (visible when pressed)   */
}

注意:pressed和.pressed之间的区别非常重要，只需阅读旁边的评论。

如何在运行时更改具有FormattedString的按钮的文本颜色？

2 个答案: