Alexa Skill 并排输出图像和文本答案

【问题标题】：Alexa Skill output image and text side by sideAlexa Skill 并排输出图像和文本
【发布时间】：2021-09-11 01:12:38
【问题描述】：

我使用的是 APL 1.6 版，并且已经添加了背景、页眉、文本、图像和页脚。我无法插入以左侧为中心的图像和以右侧为中心的文本。它总是一个接一个地完成。

这是我目前的输出：

{
  "type": "APL",
  "version": "1.6",
  "theme": "dark",
  "styles": {
  },  
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.3.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "StationData"
    ],
    "items": [
      {
        "type": "Container",
        "height": "100vh",
        "width": "100vw",
        "items": [
          {
            "type": "AlexaBackground",
            "style": "backgroundStyle",
            "backgroundColor": "#303030",
            "backgroundBlur": false,
            "colorOverlay": true
          },
          {
            "type": "AlexaHeader",
            "headerTitle": "${StationData.displayName}",
            "headerSubtitle": "${StationData.format}",
            "headerAttributionImage": "${StationData.images_640x640}",
            "headerDivider": true,
            "headerAttributionPrimacy": false,
            "headerAttributionOpacity": 1
          },
          {
            "type": "Text",
            "text": "Demo 1",
            "paddingLeft": "@marginHorizontal",
            "paddingRight": "@marginHorizontal",
            "paddingTop": "@spacingSmall",
            "textAlignVertical": "center",
            "fontSize": "30dp",
            "maxLines": 4,
            "color": "#ff0000",
            "grow": 1
          },
          {
            "type": "AlexaImage",
            "imageSource": "${StationData.images_640x640}",
            "imageRoundedCorner": true,
            "imageScale": "best-fit",
            "imageAlignment": "center",
            "imageHeight": "50vh",
            "imageAspectRatio": "square",
            "imageBlurredBackground": true
          },         
          {
            "type": "AlexaFooter",
            "style": "footerStyle",
            "hintText": "Here is the Footer"
          }
        ]
      }
    ]
  }
}

我已经尝试将图像和文本插入一帧中，每个帧宽度为 50%，但不幸的是，这并不成功。我哪里做错了？

【问题讨论】：

标签： amazon alexa alexa-skills-kit alexa-skill

【解决方案1】：

APL Container 组件默认使用column 作为方向，请参阅docs。这意味着您的项目被布置在一列中（一个在一个下方）。

您将使用direction: "row" 创建另一个容器组件，并将图像和文本组件添加到其中。然后就是调整justifyContent 和alignItems 的问题。

【讨论】：