1

我正在尝试对AlexaHeadline模板应用一个简单的径向渐变。如果将布尔参数 backgroundOverlayGradient 设置为 true，则会出现线性渐变。官方文件说：

如果为真，则对背景应用渐变。

...但我不知道在哪里设置渐变。

有任何想法吗？

谢谢你的建议！

4

1 回答 1

1

我自己找到了答案：如果您的模板（例如我的 AlexaHeadline 模板）不支持“overlayGradient”之类的属性，则可以使用“background”属性。要使用此属性，需要 APL 版本 1.3。

以下是根据官方文档示例定制的示例文档：

{
  "type": "APL",
  "version": "1.6",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.3.0"
    }
  ],
  "background": {
    "type": "radial",
    "colorRange": [
      "blue",
      "#000061"
    ],
    "inputRange": [
      0,
      1
    ]
  },
  "mainTemplate": {
    "parameters": [
      "headlineData"
    ],
    "items": [
      {
        "type": "AlexaHeadline",
        "primaryText": "${headlineData.primaryText}",
        "secondaryText": "${headlineData.secondaryText}",
        "backgroundColor": "@colorRed800",
        "backgroundImageSource": "https://.png",
        "footerHintText": "${headlineData.footerHintText}",
        "headerAttributionImage": "${headlineData.headerAttributionImage}",
        "headerBackButton": true,
        "headerBackButtonAccessibilityLabel": "back",
        "headerDivider": false,
        "headerSubtitle": "${headlineData.headerSubtitle}",
        "headerTitle": "${headlineData.headerTitle}"
      }
    ]
  }
}

如您所见，有一个“假”的 backgroundImageSource-Url。没有它，渐变不会出现。如果没有合适的 backgroundImageSource，APL 使用 backgroundColor 属性。所以，我认为，如果使用了 backgroundColor ，它会覆盖背景属性。我尝试在 backgroundColor 属性上应用渐变，但这对我不起作用。

于 2021-05-09T22:18:40.337 回答