You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改MDCOutlinedTextField的占位符(标签)颜色?

MDCOutlinedTextField 占位符/浮动标签颜色修改方案

我无法修改MDCOutlinedTextField的占位符文本颜色——该文本在未聚焦时作为输入提示,聚焦后会移至顶部成为标签。目前正在将项目中所有MDC-TextField和MDC-TextInputController替换为新的MDCOutlinedTextField,但尝试了多种方法都无法修改该标签的颜色,以下是我编写的通用配置扩展(已注释掉无效尝试):

extension MDCOutlinedTextField {
    
    func setUpGeneralBackgroundColors(){
        
        // 输入文本颜色
       self.setTextColor(UIColor.white, for: .normal)
        self.setTextColor(UIColor.white, for: .editing)
        
        // 边框颜色
        self.setOutlineColor(UIColor.white, for: .normal)
        self.setOutlineColor(UIColor.white, for: .editing)
        
        // self.setFloatingLabelColor(UIColor.white, for: .normal)
        // self.setFloatingLabelColor(UIColor.white, for: .editing)
        // self.setFloatingLabelColor(UIColor.white, for: .disabled)

        // self.setNormalLabelColor(UIColor.purple, for: .normal)
        // self.setNormalLabelColor(UIColor.purple, for: .editing)
        // self.setNormalLabelColor(UIColor.purple, for: .disabled)
        
        // self.label.tintColor = UIColor.purple
        // self.label.textColor = UIColor.systemPink
        // self.label.shadowColor = UIColor.cyan
        // self.label.backgroundColor = UIColor.red
        
        // 修改输入框内图标颜色(如果有的话)
        self.tintColor = .green
        
    }
}

解决方案

直接修改label属性的颜色会被组件内部逻辑覆盖,必须使用官方提供的对应API区分状态设置。正确的配置代码如下:

extension MDCOutlinedTextField {
    func setUpGeneralBackgroundColors() {
        // 输入文本颜色
        self.setTextColor(.white, for: .normal)
        self.setTextColor(.white, for: .editing)
        
        // 边框颜色
        self.setOutlineColor(.white, for: .normal)
        self.setOutlineColor(.white, for: .editing)
        
        // 设置未聚焦时的占位符(正常标签)颜色
        self.setNormalLabelColor(.white, for: .normal)
        self.setNormalLabelColor(.gray, for: .disabled)
        
        // 设置聚焦后的浮动标签颜色
        self.setFloatingLabelColor(.white, for: .editing)
        self.setFloatingLabelColor(.gray, for: .disabled)
        
        // 输入框内图标颜色
        self.tintColor = .green
    }
}
  • setNormalLabelColor(_:for:):控制未聚焦状态下的占位符文本颜色
  • setFloatingLabelColor(_:for:):控制聚焦后移至顶部的标签颜色
  • 分别为.normal和.disabled状态设置颜色,覆盖所有场景

内容的提问来源于stack exchange,提问作者WrapItUp87

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.16 00:37:08