# FunctionalButton如何切换颜色？

FunctionalButton的参数styleconfig不支持状态变量动态刷新。可参考如下样例进行颜色切换：

```ts
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
      })
    }
  }
}
```