如何修改Google AppScript（Gmail插件）中单选按钮及标签的颜色？

Google Apps Script的CardService组件（包括单选按钮）不支持自定义按钮/标签颜色，也无法直接设置选中文本加粗。这是因为Gmail插件的UI样式由Google统一管控，目的是保持插件与Gmail原生界面的视觉一致性，只开放了有限的自定义配置项，选中状态的绿色是默认系统样式，无法通过官方API修改。

如果需要实现类似的视觉效果，可以通过自定义组件组合来模拟单选按钮的行为：

• 使用TextButton组件替代原生单选按钮，配合文本样式设置
• 手动处理选中状态的切换逻辑，通过点击事件更新组件样式

以下是一个简单的模拟示例：

function createCustomRadioGroup() {
  // 保存选中状态（可根据实际场景用PropertiesService或卡片state管理）
  const selectedValue = "radio_one_value";
  
  const cardSection = CardService.newCardSection();
  
  // 选项1
  const button1 = CardService.newTextButton()
    .setText("radio button one title")
    .setOnClickAction(CardService.newAction()
      .setFunctionName("handleRadioSelect")
      .setParameters({value: "radio_one_value"}))
    .setBackgroundColor(selectedValue === "radio_one_value" ? "#4285F4" : "transparent")
    .setTextStyle(CardService.newTextStyle()
      .setBold(selectedValue === "radio_one_value")
      .setForegroundColor(selectedValue === "radio_one_value" ? "white" : "black"));
  
  cardSection.addWidget(button1);
  
  // 选项2
  const button2 = CardService.newTextButton()
    .setText("radio button two title")
    .setOnClickAction(CardService.newAction()
      .setFunctionName("handleRadioSelect")
      .setParameters({value: "radio_two_value"}))
    .setBackgroundColor(selectedValue === "radio_two_value" ? "#4285F4" : "transparent")
    .setTextStyle(CardService.newTextStyle()
      .setBold(selectedValue === "radio_two_value")
      .setForegroundColor(selectedValue === "radio_two_value" ? "white" : "black"));
  
  cardSection.addWidget(button2);
  
  // 选项3
  const button3 = CardService.newTextButton()
    .setText("radio button three title")
    .setOnClickAction(CardService.newAction()
      .setFunctionName("handleRadioSelect")
      .setParameters({value: "radio_three_value"}))
    .setBackgroundColor(selectedValue === "radio_three_value" ? "#4285F4" : "transparent")
    .setTextStyle(CardService.newTextStyle()
      .setBold(selectedValue === "radio_three_value")
      .setForegroundColor(selectedValue === "radio_three_value" ? "white" : "black"));
  
  cardSection.addWidget(button3);
  
  const card = CardService.newCardBuilder().addSection(cardSection).build();
  return card;
}

// 处理选中事件，更新卡片状态
function handleRadioSelect(e) {
  const selectedValue = e.parameters.value;
  // 这里可以用PropertiesService保存选中值，或者更新卡片state
  return createCustomRadioGroup(); // 返回更新后的卡片
}

注意事项：

• 这种模拟方式需要自己管理选中状态，逻辑比原生单选按钮复杂
• TextButton的样式仍然受CardService限制，无法完全自由定义颜色
• 切换状态时需要重新渲染卡片，可能存在轻微的界面刷新

内容的提问来源于stack exchange，提问作者GovZ