Как изменить цвет текста кнопки с форматированиемString во время выполнения?

Question

I имеют следующую структуру:

<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 перекрываться 2 одинаковых кнопками друг над другими (используя ту же седловину и строку), а затем , используя CSS, я скрою верхнюю кнопку на своем: нажатом состоянии, а также добавил дополнительный сжатый класс к нижней кнопке, чтобы я мог стилизовать его так, как хочу, чтобы моя кнопка выглядела, когда пользователь нажимает на нее.

Поэтому я не считаю это чистым решением, но тем не менее это решение. Это нужно будет сделать, пока кто-то не придумает что-то лучше. Если это будет так, я думаю, я должен открыть проблему в Gigub Nativescript, и, возможно, попытаюсь вытащить собственное решение и сделать 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, только что прочитал комментарий рядом с ним.