Alexa APL。使AlexaHeader组件位于单个Image组件顶部时出现问题?

问题描述 投票:0回答:1

我想在我的Alexa Skill APL页面顶部有一个标题,用于显示标题和子标题。在它的正下方,我想要一张图像。换句话说,我想在图像顶部的方框中放置标题和子标题,并占据屏幕的第一行。

AlexaHeader组件对此似乎很完美。但是,当我在容器中将其用作第一个子项时,接着将Image组件的scale属性设置为best-fit,则Image组件将占据整个屏幕,而AlexaHeader组件将behind图像,垂直居中,not在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": ""
        }
    }
}   
alexa-skills-kit alexa-skill alexa-presentation-language
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.