Alexa APL。让 AlexaHeader 组件位于单个 Image 组件之上的问题？

Question

我想在我的 Alexa Skill APL 页面顶部有一个标题，显示标题和子标题。在它的正下方，我想要一个图像。换句话说，我希望将标题和子标题放在图像顶部的一个框中，占据屏幕的顶行。

AlexaHeader 组件似乎非常适合这个。但是，当我在容器中将它用作第一个子项时，接下来将 Image 组件的 scale 属性设置为 best-fit，Image 组件会占据整个屏幕和 AlexaHeader 组件在图像后面，垂直居中，不在 APL 页面的顶部。我可以在图像后面看到它，因为图像不会水平填充屏幕，只会垂直填充。

我怎样才能得到我想要的样子？

这是我正在使用的布局元素的 APL JSON：

"my-layout": {
    "type": "Alexa.Presentation.APL.RenderDocument",
    "token": "ABC_RENDERED_DOCUMENT",
    "version": "1.0",
    "document": {
        "type": "APL",
        "version": "1.0",
        "import": [
          {
                "name": "alexa-layouts",
                "version": "1.0.0"
          }
        ],
        "mainTemplate": {
            "description": "********* Minimal APL document **********",
            "parameters": [
                "payload"
            ],
            "items": [
                {
                    "type": "Container",
                    "width": "100%",
                    "height": "100%",
                    "alignItems": "center",
                    "justifyContent": "center",
                    "items": [
                        {
                            "type": "AlexaHeader",
                            "headerBackButton": true,
                            "headerBackButtonAccessibilityLabel": "back",
                            "headerBackgroundColor": "orange",
                            "headerTitle": "${payload.visualProperties.title}",
                            "headerSubtitle":"${payload.visualProperties.subtitle}",
                            "headerAttributionText": "photos by Pexels.com",
                            "headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
                            "headerAttributionPrimacy": true,
                            "headerDivider": true
                        },                            
                        {
                            "type": "Image",
                            "source": "${payload.visualProperties.background}",
                            "position": "absolute",
                            "width": "100vw",
                            "height": "100vh",
                            "scale": "best-fit"
                        }
                    ]
                }
            ]
        }
    },
    "datasources": {
        "visualProperties": {
            "background": "https://m.media-amazon.com/images/G/01/alexa-games/backgrounds/memorystory-gui-1._CB473869069_.png",
            "title": "",
            "subtitle": ""
        }
    }
}   

Answer 1

您似乎设置了绝对定位，以便图像将显示在您的标题顶部（您只需要交换顺序）以及其他一些需要调整的项目。

我可能误解了您的要求，但以下是我对您想要的最佳猜测。如果您需要任何调整，请告诉我。

"my-layout": {
    "type": "Alexa.Presentation.APL.RenderDocument",
    "token": "ABC_RENDERED_DOCUMENT",
    "version": "1.0",
    "document": {
        "type": "APL",
        "version": "1.0",
        "import": [
            {
                "name": "alexa-layouts",
                "version": "1.0.0"
            }
        ],
        "mainTemplate": {
            "description": "********* Minimal APL document **********",
            "parameters": [
                "payload"
            ],
            "items": [
                {
                    "type": "Container",
                    "width": "100%",
                    "height": "100%",
                    "items": [
                    {
                        "type": "AlexaHeader",
                        "headerBackButton": true,
                        "headerBackButtonAccessibilityLabel": "back",
                        "headerBackgroundColor": "orange",
                        "headerTitle": "${payload.visualProperties.title}",
                        "headerSubtitle": "${payload.visualProperties.subtitle}",
                        "headerAttributionText": "photos by Pexels.com",
                        "headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
                        "headerAttributionPrimacy": true
                    },
                    {
                        "type": "Image",
                        "source": "${payload.visualProperties.background}",
                        "width": "100vw",
                        "height": "100vh",
                        "scale": "best-fit",
                        "align": "bottom"
                    }
                ]
                }
            ]
        }
    },
    "datasources": {
        "visualProperties": {
            "background": "https://m.media-amazon.com/images/G/01/alexa-games/backgrounds/memorystory-gui-1._CB473869069_.png",
            "title": "Header",
            "subtitle": "Header Subtitle"
        }
    }
}