Alexa Skill 并排输出图像和文本

Posted 2023-04-14

【中文标题】Alexa Skill 并排输出图像和文本

【英文标题】：Alexa Skill output image and text side by side

【发布时间】：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%，但不幸的是，这并不成功。 我哪里做错了？

【参考方案1】：

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

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