HarmonyOS 如何自定义一键登录组件的颜色

HarmonyOS
2025-01-09 13:40:39
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang
  1. 一键登录组件中有提供“customButtonParams”属性对象,此对象中有提供设置按钮背景颜色以及设置按钮字体颜色的参数

<a name="table3942110142413"></a> <table><thead align="left"><tr id="row1296514015242"><th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.1"><p id="p49651020249"><a name="p49651020249"></a><a name="p49651020249"></a>名称</p> </th> <th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.2"><p id="p2966110102411"><a name="p2966110102411"></a><a name="p2966110102411"></a>类型</p> </th> <th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.3"><p id="p12966501249"><a name="p12966501249"></a><a name="p12966501249"></a>只读</p> </th> <th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.4"><p id="p119668082414"><a name="p119668082414"></a><a name="p119668082414"></a>可选</p> </th> <th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.5"><p id="p1996614012242"><a name="p1996614012242"></a><a name="p1996614012242"></a>说明</p> </th> </tr> </thead> <tbody><tr id="row3966160122412"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p1896611072419"><a name="p1896611072419"></a><a name="p1896611072419"></a>fontColor</p> </td> <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p2966150152416"><a name="p2966150152416"></a><a name="p2966150152416"></a><a href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/account-api-component-manager-V5#section1660816591873" target="_blank" rel="noopener noreferrer">FontColor</a></p> </td> <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p169663015248"><a name="p169663015248"></a><a name="p169663015248"></a>否</p> </td> <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p1396613002416"><a name="p1396613002416"></a><a name="p1396613002416"></a>是</p> </td> <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p396620162417"><a name="p396620162417"></a><a name="p396620162417"></a><a href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/account-api-huawei-id-button-V5" target="_blank" rel="noopener noreferrer">LoginWithHuaweiIDButton</a>按钮文字颜色。</p> <p id="p496612012417"><a name="p496612012417"></a><a name="p496612012417"></a>默认值:<a href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/account-api-component-manager-V5#section1660816591873" target="_blank" rel="noopener noreferrer">FontColor</a>.WHITE</p> </td> </tr> <tr id="row196660182415"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p1966190122415"><a name="p1966190122415"></a><a name="p1966190122415"></a>backgroundColor</p> </td> <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p7966160132411"><a name="p7966160132411"></a><a name="p7966160132411"></a><a href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-types-V5#resourcecolor" target="_blank" rel="noopener noreferrer">ResourceColor</a></p> </td> <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p896630122410"><a name="p896630122410"></a><a name="p896630122410"></a>否</p> </td> <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p396640142411"><a name="p396640142411"></a><a name="p396640142411"></a>是</p> </td> <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p7966170182417"><a name="p7966170182417"></a><a name="p7966170182417"></a><a href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/account-api-huawei-id-button-V5" target="_blank" rel="noopener noreferrer">LoginWithHuaweiIDButton</a>按钮的背景颜色。</p> <p id="p29661801244"><a name="p29661801244"></a><a name="p29661801244"></a>默认值:Red 红色背景</p> </td> </tr> </tbody> </table>

  1. 可以通过定义“customButtonParams”属性的值修改一键登录组件的背景和字体颜色

自定义黑色背景以及白色字体:

import { loginComponentManager, LoginWithHuaweiIDButton } from '@kit.AccountKit';

@Entry
@Component
struct HWAccountPage {
  build() {
    Row() {
      Column() {
        LoginWithHuaweiIDButton({
          params: {
            // LoginWithHuaweiIDButton支持的样式。
            style: loginComponentManager.Style.BUTTON_CUSTOM,
            // LoginWithHuaweiIDButton的边框圆角半径。
            borderRadius: 24,
            // LoginWithHuaweiIDButton支持的登录类型。
            loginType: loginComponentManager.LoginType.QUICK_LOGIN,
            // LoginWithHuaweiIDButton支持按钮的样式跟随系统深浅色模式切换。
            supportDarkMode: true,
            //自定义按钮背景颜色色以及按钮字体颜色
            customButtonParams: {
              fontColor: loginComponentManager.FontColor.WHITE,
              backgroundColor: '#000000'
            }
          },
          // controller: this.controller
        })
          .height(40)
          .width('80%')
          .constraintSize({ maxWidth: 448 })
      }
      .width('100%')
    }
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2025-01-09 15:46:00
相关问题
HarmonyOS 一键登录功能
744浏览 • 1回复 待解决
HarmonyOS 华为账号一键登录
638浏览 • 1回复 待解决
HarmonyOS如何实现一键登录功能?
613浏览 • 0回复 待解决
使用一键登录hsp包,编译报错
627浏览 • 1回复 待解决
HarmonyOS 手机号一键登录功能
329浏览 • 1回复 待解决
HarmonyOS 集成华为一键登录 服务端demo
554浏览 • 2回复 待解决
HarmonyOS 如何一键置灰
477浏览 • 1回复 待解决
HarmonyOS 如何设置自定义弹框颜色
350浏览 • 1回复 待解决
HarmonyOS bm一键安装文档
563浏览 • 1回复 待解决