如何使用CardService实现按钮水平居中对齐？

问题背景 #

开发Google Apps Script日历插件时，需要实现按钮水平居中对齐，但TextButton本身没有直接的对齐属性。此前靠添加禁用空白按钮占位实现居中，不过平台更新后，这类空白禁用按钮会显示灰色边框，尝试去除边框、替换文本为特殊字符都无法解决。

解决方案：用Grid组件包裹按钮实现居中 #

借助Grid和GridItem组件的原生对齐能力，把按钮放入支持居中设置的容器里，不用再依赖空白按钮占位。

修改后的核心代码

// 创建需要居中的按钮
var button = CardService.newTextButton()
  .setText(translate("NEXT", selctlang))
  .setOnClickAction(action)
  .setTextButtonStyle(CardService.TextButtonStyle.FILLED);

// 创建GridItem并设置水平居中
const buttonGridItem = CardService.newGridItem()
  .addWidget(button)
  .setTextAlignment(CardService.HorizontalAlignment.CENTER);

// 创建单列Grid容器
const buttonGrid = CardService.newGrid()
  .setNumColumns(1)
  .addItem(buttonGridItem);

// 将Grid容器添加到卡片区域，替换原来的buttonSet
var section = CardService.newCardSection()
  .addWidget(image)
  .addWidget(textInput)
  .addWidget(buttonGrid);

原理说明 #

• Grid通过setNumColumns(1)设置单列布局，会占据整行宽度
• GridItem的setTextAlignment(CardService.HorizontalAlignment.CENTER)可以让内部的按钮在列内水平居中
• 这种方式基于官方原生布局能力，不会受平台更新带来的兼容性问题影响，彻底替代原有的空白按钮占位方案

内容的提问来源于stack exchange，提问作者eco-sumit