你能在原生脚本/角度中更改按钮对焦颜色吗?

Question

你能像在Nativescript/Angular中的TextField中那样改变按钮的颜色吗？ 它适用于文本字段，但不适用于按钮 有人知道其他解决方案吗，我试图构建一个电视应用程序，我需要在聚焦在按钮或标签中时更改颜色

网页文件

<Page loaded="onPageLoaded($event)">
<StackLayout>
<Button  text="My Button 2"  class="my_button_2" >  </Button>
<TextField class="input-field"> </TextField>
</StackLayout>
</Page>

CSS 文件

.my_button_2:focus{
background:olive;
border-color: red;
border: 2;
border-width: 2;
}
.my_button_2:active{
background:olive;
border-color: red;
border: 2;
border-width: 2;
}

.input-field:focus {
border-bottom-color: red;

Answer 1

根据 nativescript 的 UI 和 Styleing 文档，nativescript 目前仅支持 Button 上的:highlighed伪选择器。

你应该像这样使用它：

.my_button_2:highlighted {
background:olive;
border-color: red;
border: 2;
border-width: 2;
}

注意：默认情况下，在 Android 上，按钮元素不可聚焦。因此，如果要启用对Android Button元素的关注，则需要首先使用以下方法向其本机组件(android.widget.Button)添加修改：

添加一个"加载的"事件侦听器：

<Button (loaded)="onButtonLoaded($event)" text="My Button 2"  class="my_button_2"></Button>

然后，在加载元素时，启用焦点：

import { Button } from "@nativescript/core";
export class AppComponent {
onButtonLoaded(event: TapGestureEventData) {
const btn = event.object as Button;
const androidButton = btn.android;
androidButton.setFocusableInTouchMode(true); // make Button focusable
}
}

这使得按钮可聚焦，您可以像这样手动聚焦它：

import { Component, ElementRef, ViewChild } from "@angular/core";
import { Button } from "@nativescript/core";
export class AppComponent {
@ViewChild("btn") btn: ElementRef<Button>;
focusBtn() {
const isFocused = this.btn.nativeElement.focus();
console.log(`did focus? ${isFocused}`);
}
}

注意：由于如上所述框架限制:highlighted，您仍然无法使用button:focuscss 伪选择器。

但是，为了解决您的情况，如果您的方案是手动设置焦点，则可以使用以下方法来实现类似于焦点的行为(适用于 Android 和 iOS)：

.CSS：

.focus {
background:yellow;
border-color: red;
border: 2;
border-width: 2;
}

.html模板：

<Button (loaded)="onButtonLoaded($event)" text="My Button 2"  class="my_button_2" [ngClass]="{ 'focus': buttonIsFocused }"></Button>

.ts：

export class AppComponent {
buttonIsFocused = false;
focusOnButton() {
// call this when you wish to add focus styling to the button
this.buttonIsFocused = true;
}
defocusButton() {
// call this when you wish to remove the focus styling
this.buttonIsFocused = false;
}
}

查看此内容以了解有关本机脚本样式的更多信息。 检查这个和这个以阅读有关本机iOS焦点的更多信息。

Answer 2

在这里，它是Android的相同解决方案，但与Angular Directive相同

##### HTML ##

<Button #myButton1 text="My Button 1" class="button_style" focusable (focusChange)="onFocusChange($event)"></Button>

指令.ts 文件

import {Directive, ElementRef,EventEmitter,Output} from '@angular/core'
@Directive({
selector: '[focusable]'
})
export class FocusableDirective {
@Output('focusChange') focusChange = new EventEmitter<any>();
constructor(private el: ElementRef<any>) {
el.nativeElement.once('loaded', () => {
el.nativeElement.android.setOnFocusChangeListener(new android.view.View.OnFocusChangeListener({
onFocusChange: (view, hasFocus) => {
this.focusChange.emit(hasFocus);
}
}));
})
}
}

组件.ts 文件

public onFocusChange(hasFocus){
const mybtn = <Label>this.myButton.nativeElement
if(hasFocus === true){
mybtn.addPseudoClass("focus")
}
else {
mybtn.deletePseudoClass("focus")
}
};

#### CSS ##

.button_style {
android-elevation: 0;
android-dynamic-elevation-offset: 0;
background: rgba(190, 138, 17, 0.315);
border-width: 0.3;
border-color: rgba(190, 138, 17, 0.671);
}
.button_style:focus{
android-elevation: 0;
android-dynamic-elevation-offset: 0;
background: rgba(190, 138, 17, 0.856);
border-width: 0.3;
border-color: rgba(116, 84, 11, 0.856);
}

Answer 3

这是安卓加载事件中的解决方案

.HTML

<Button #myButton1 text="My Button 1" (tap)="OnTapButton_1($event)" (loaded)="onButtonLoaded_1($event)" class="button_style"></Button>

组件.ts 文件

public onButtonLoaded_1(args) {
let btn = args.object as Button;
let androidButton = btn.android;
androidButton.setOnFocusChangeListener(new android.view.View.OnFocusChangeListener({
onFocusChange:(view, hasFocus) => {
if(hasFocus === true){
btn.addPseudoClass("focus")
}
else {
btn.deletePseudoClass("focus")
}
}
}))
}

.CSS

.button_style {
android-elevation: 0;
android-dynamic-elevation-offset: 0;
background: rgba(190, 138, 17, 0.315);
border-width: 0.3;
border-color: rgba(190, 138, 17, 0.671);
}
.button_style:focus{
android-elevation: 0;
android-dynamic-elevation-offset: 0;
background: rgba(190, 138, 17, 0.856);
border-width: 0.3;
border-color: rgba(116, 84, 11, 0.856);
}

在其中分解

androidButton.setOnFocusChangeListener(null)