首页 文章

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

提问于
浏览 次
0

我有以下结构：

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

angularjs typescript nativescript

2 回答

  • 2

    FormattedString 拥有自己的一组属性 .

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

    Documentation

    回复于
  • 0

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

    我不得不为这个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 之间的区别很重要，只需阅读旁边的注释即可 .

    回复于

相关问题