如何在Gmail插件中实现Button与Key Value Add-on并排显示？

嘿，这个问题我刚好踩过坑！在Gmail插件（属于Google Workspace Add-ons范畴）里，默认单个Widget会独占一行，但其实用Flex布局容器就能轻松实现多个组件并排，具体操作如下：

• 核心思路：用Flex组件作为容器，把Button和KeyValue组件都放进这个容器的items列表里，通过Flex的布局属性控制它们在同一行展示。
• 关键配置：
  • 设置Flex的direction为ROW（默认就是行方向，明确设置更清晰）；
  • 用alignItems调整垂直对齐方式，比如CENTER能让两个组件在垂直方向居中对齐，视觉上更协调。

给你个实际的代码示例（基于Apps Script）：

// 1. 创建Button组件
const actionButton = CardService.newTextButton()
  .setText("执行操作")
  .setOnClickAction(CardService.newAction().setFunctionName("handleButtonClick"));

// 2. 创建KeyValue组件
const statusKeyValue = CardService.newKeyValue()
  .setTopLabel("当前状态")
  .setContent("待处理")
  .setIcon(CardService.Icon.WARNING, CardService.IconColor.YELLOW);

// 3. 用Flex容器包裹两个组件，实现并排
const rowContainer = CardService.newFlex()
  .setDirection(CardService.FlexDirection.ROW)
  .setAlignItems(CardService.FlexAlignItems.CENTER)
  .addItem(actionButton)
  // 可以给第二个组件加外边距，拉开和按钮的距离
  .addItem(statusKeyValue.setMargin(CardService.Margin.START, 16));

// 4. 将Flex容器添加到卡片段落中
const cardSection = CardService.newCardSection().addWidget(rowContainer);

// 5. 组装卡片并返回
const card = CardService.newCardBuilder().addSection(cardSection).build();

另外还有个小技巧：如果需要让其中某个组件占据剩余的行空间，可以在addItem时设置flexGrow参数，比如：

.addItem(statusKeyValue, CardService.FlexItemLayout.FILL, 1)

这样KeyValue组件会自动填充按钮之外的剩余宽度，布局更灵活。

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