The styleconfig parameter of the FunctionalButton component does not support dynamic update of status variables. You can change the color by referring to the sample code below.
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
@Entry
@Component
struct demo {
@State isCheckAgreementFlag: boolean = false;
@Builder
functionalButton(color: ResourceColor) {
FunctionalButton({
params: {
// OpenType.GET_PHONE_NUMBER indicates that the button is used to verify mobile numbers.
openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER,
label: 'Verify mobile number',
// Adjust the button style.
styleOption: {
bgColor: functionalButtonComponentManager.ColorType.DEFAULT,
size: functionalButtonComponentManager.SizeType.DEFAULT,
plain: false,
disabled: false,
loading: false,
hoverClass: functionalButtonComponentManager.HoverClassType.HOVER_CLASS,
hoverStartTime: 0,
hoverStayTime: 0,
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize('14vp')
.fontColor(Color.Black)
.backgroundColor(color)
.border({ width: 0.5, color: '#444' })
.type(ButtonType.Capsule)
.stateEffect(false)
.width(250)
.height(35)
}
},
// When OpenType is set to GET_PHONE_NUMBER, the callback must be onGetPhoneNumber.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onGetPhoneNumber((err, data) => {
if (err) {
// Error processing.
return;
}
// Success processing.
})
})
}
build() {
Column({ space: 5 }) {
if (this.isCheckAgreementFlag) {
this.functionalButton('#9967FB')
} else {
this.functionalButton('#d4d4d4')
}
Button('Change color').onClick(() => {
this.isCheckAgreementFlag = !this.isCheckAgreementFlag
})
}
}
}