FunctionalButton的参数styleconfig不支持状态变量动态刷新。可参考如下样例进行颜色切换：
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
@Entry
@Component
struct demo {
@State isCheckAgreementFlag: boolean = false;
@Builder
functionalButton(color: ResourceColor) {
FunctionalButton({
params: {
// OpenType.GET_PHONE_NUMBER表示Button为快速验证手机号类型
openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER,
label: '快速验证手机号',
// 调整Button样式
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)
}
},
// OpenType为“GET_PHONE_NUMBER”时，回调必须选择“onGetPhoneNumber”
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onGetPhoneNumber((err, data) => {
if (err) {
// 错误日志处理
return;
}
// 成功日志处理
})
})
}
build() {
Column({ space: 5 }) {
if (this.isCheckAgreementFlag) {
this.functionalButton('#9967FB')
} else {
this.functionalButton('#d4d4d4')
}
Button('切换颜色').onClick(() => {
this.isCheckAgreementFlag = !this.isCheckAgreementFlag
})
}
}
}