我想在我的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": ""
}
}
}