uni-app Android 自定义隐私弹窗示例中 按钮字体颜色如何修改 android:textColor 无效

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app Android 自定义隐私弹窗示例中 按钮字体颜色如何修改 android:textColor 无效

XML代码示例

<Button
android:id="@+id/btn_custom_privacy_sure"
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="@drawable/rounded_button"
android:paddingLeft="12dp"
android:paddingTop="5dp"
android:paddingRight="12dp"
android:paddingBottom="5dp"
android:text="确认"
android:textColor="@drawable/dcloud_custom_rich_dialog_button_text_selecter"
android:textSize="14sp"
android:visibility="gone" />

dcloud_custom_rich_dialog_button_text_selecter.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:textColor="#FFFFFF"/>
    <item android:state_pressed="true" android:color="#FFFFFF"/>
    <item android:state_pressed="false" android:textColor="#9A9A9A"/>
    <item android:state_pressed="false" android:color="#9A9A9A"/>
</selector>

屏幕截图

屏幕截图


Harmonyos Next教程
7 回复

xml设置Button的android:textColor无效时，在manifest.json中privacy下配置styles就可以了


styles 里面配置了没有效果

“privacy” : { “prompt” : “template”, “template” : { “title” : “用户协议及隐私政策”, “message” : “为了保障您的合法权益，请您阅读并同意<a href=“static/html/userAgreement.html”>《用户协议》及<a href=“static/html/privacy.html”>《隐私政策》”, “buttonAccept” : “同意并继续”, “buttonRefuse” : “暂不同意” }, “styles” : { “borderRadius” : “5px”, “title” : { “color” : “#ff00ff” }, “buttonAccept” : { “color” : “#ffff00” }, “buttonRefuse” : { “color” : “#00ffff” }, “buttonVisitor” : { “color” : “#00ffff” } } }, 是这样配的吗？

style 配置之后 使用安装包安装后的 app 使用 uniapp 运行重新运行一次就可以了

大哥，把代码贴一下

兄弟，这部分代码可以发分享一下吗

在uni-app中，如果你尝试通过原生Android属性如android:textColor来修改自定义弹窗中按钮的字体颜色，会发现这种方式通常不会生效，因为uni-app主要使用的是Vue.js框架和Web技术栈来构建跨平台应用。这意味着大部分UI和样式应该通过CSS或Vue组件的样式绑定来管理。

以下是一个示例，展示如何在uni-app中自定义一个隐私弹窗，并修改按钮的字体颜色。这个示例将使用Vue的<style>标签和CSS来实现样式的自定义。

1. 创建弹窗组件

首先，创建一个新的Vue组件文件，比如PrivacyPopup.vue，用于显示隐私弹窗。

<template>
  <view class="privacy-popup">
    <view class="popup-content">
      <text>This is a privacy popup.</text>
      <button @click="accept" class="popup-button accept-button">Accept</button>
      <button @click="decline" class="popup-button decline-button">Decline</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    accept() {
      // 处理接受逻辑
    },
    decline() {
      // 处理拒绝逻辑
    }
  }
}
</script>

<style scoped>
.privacy-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.popup-button {
  padding: 10px 20px;
  margin: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

.accept-button {
  background-color: #4CAF50;
  color: white; /* 设置接受按钮的字体颜色 */
}

.decline-button {
  background-color: #f44336;
  color: white; /* 设置拒绝按钮的字体颜色 */
}
</style>

2. 使用弹窗组件

在你的主页面或其他需要显示弹窗的页面中引入并使用这个组件。

<template>
  <view>
    <!-- 其他内容 -->
    <PrivacyPopup v-if="showPopup" />
  </view>
</template>

<script>
import PrivacyPopup from './components/PrivacyPopup.vue';

export default {
  components: {
    PrivacyPopup
  },
  data() {
    return {
      showPopup: false
    };
  },
  methods: {
    showPrivacyPopup() {
      this.showPopup = true;
    }
  }
}
</script>

通过这种方式，你可以完全控制弹窗的样式，包括按钮的字体颜色，而无需依赖原生Android属性。

回到顶部