移除Apps Script插件中DecoratedText灰色悬停效果及替代方案咨询

1. 移除DecoratedText的悬停灰色背景 #

DecoratedText本身就是为可交互场景设计的组件，哪怕没设置点击动作，默认也会带有悬停高亮效果。要消除这个效果，有两种可行方案：

• 方案一：绑定空点击动作
  给DecoratedText添加一个不执行任何操作的空动作，就能覆盖默认的可交互状态，悬停背景会直接消失：

  function getCompressFormCard(currentElement) {
    let fileText = CardService.newDecoratedText()
      .setText(currentElement.title)
      .setStartIcon(CardService.newIconImage().setIconUrl(currentElement.iconUrl))
      .setWrapText(true)
      // 添加空动作移除悬停效果
      .setOnClickAction(CardService.newAction());
  
    let section = CardService.newCardSection()
      .setCollapsible(false)
      .addWidget(fileText);
  
    return CardService.newCardBuilder().addSection(section).build();
  }
  

• 方案二：改用非交互组件组合
  如果完全不需要交互性，直接用Image+TextParagraph的组合替代DecoratedText，从根源上避免可交互样式：

  function getCompressFormCard(currentElement) {
    // 创建左侧图标
    let icon = CardService.newImage()
      .setImageUrl(currentElement.iconUrl)
      .setAltText("Icon");
    
    // 创建可换行的文本段落
    let textPara = CardService.newTextParagraph()
      .setText(currentElement.title);
  
    // 用FlexBox实现图标与文本的横向排列
    let flexBox = CardService.newFlexBox()
      .setDirection(CardService.FlexDirection.ROW)
      .setAlignItems(CardService.VerticalAlignment.CENTER)
      .addItem(icon)
      .addItem(textPara, 1); // 文本占剩余空间，自动换行
  
    let section = CardService.newCardSection()
      .setCollapsible(false)
      .addWidget(flexBox);
  
    return CardService.newCardBuilder().addSection(section).build();
  }
  

2. 用TextParagraph实现类似视觉效果 #

TextParagraph本身无法直接嵌入图标，但可以通过FlexBox组件将Image和TextParagraph组合，实现图标在左/右、文本换行的效果：

图标在左侧，文本自动换行 #

上面方案二的代码已经实现了这个效果，核心是用FlexBox横向排列图标与文本，给TextParagraph设置占比为1，让它自动填充剩余空间并换行。

图标在右侧 #

只需调整FlexBox内的组件顺序，先放文本再放图标即可：

let flexBox = CardService.newFlexBox()
  .setDirection(CardService.FlexDirection.ROW)
  .setAlignItems(CardService.VerticalAlignment.CENTER)
  .addItem(textPara, 1) // 文本占剩余空间
  .addItem(icon); // 图标放在右侧

文本换行控制 #

TextParagraph默认会根据容器宽度自动换行；如果需要强制不换行，要么控制文本长度，要么改用DecoratedText并设置setWrapText(false)——TextParagraph本身没有直接的不换行配置项。

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