亚历克萨APL。让 AlexaHeader 组件位于单个图像组件之上时出现问题？

Question

我想在我的 Alexa Skill APL 页面顶部有一个 header，显示标题和 Sub-Title。在它的正下方，我想要一张图片。换句话说，我希望标题和 Sub-Title 位于图像顶部的框中，占据屏幕的第一行。

AlexaHeader 组件似乎非常适合这个。但是当我在容器中将它用作第一个 child 项时，图像组件的下一个 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"
        }
    }
}

亚历克萨APL。让 AlexaHeader 组件位于单个图像组件之上时出现问题？

Alexa APL. Problems getting AlexaHeader component to sit atop single Image component?

alexa-skills-kit

alexa-skill

alexa-presentation-language