时间戳

首页 > 解决方案 > AdaptiveCards - 如何在 iOS 上自定义动作的颜色和字体？

ios - AdaptiveCards - 如何在 iOS 上自定义动作的颜色和字体？

问题描述

我正在使用 AdaptiveCard SDK 的 v1.2.6。使用这个使用 3 种可用样式（默认、积极、破坏性）的示例卡片，我似乎只能控制positive卡片的背景颜色，而且它的工作方式不是很直观。

我正在使用的卡：

{
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "type":"AdaptiveCard",
   "version":"1.2",
   "body":[
      {
         "type":"TextBlock",
         "wrap":true,
         "text":"There are also still actions at the bottom of the card"
      }
   ],
   "actions":[
      {
         "type":"Action.ShowCard",
         "title":"Positive",
         "style":"positive",
         "card":{
            "type":"AdaptiveCard",
            "body":[
               {
                  "type":"TextBlock",
                  "text":"This is a show card"
               }
            ]
         }
      },
      {
         "type":"Action.OpenUrl",
         "title":"Desctructive",
         "url":"https://adaptivecards.io",
         "style":"destructive"
      },
      {
         "type":"Action.Submit",
         "title":"Default",
         "data":{
            "x":13
         }
      }
   ]
}

我正在使用的主机配置：

{
    "hostCapabilities": {
        "capabilities": null
    },
    "choiceSetInputValueSeparator": ",",
    "supportsInteractivity": true,
    "fontFamily": "Arial",
    "spacing": {
        "small": 4,
        "default": 12,
        "medium": 12,
        "large": 12,
        "extraLarge": 16,
        "padding": 12
    },
    "separator": {
        "lineThickness": 1,
        "lineColor": "#EEEEEE"
    },
    "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 16,
        "large": 20,
        "extraLarge": 22
    },
    "fontWeights": {
        "lighter": 300,
        "default": 400,
        "bolder": 600
    },
    "imageSizes": {
        "small": 40,
        "medium": 80,
        "large": 160
    },
    "containerStyles": {
        "default": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#CE2D4F", // this affects the "positive" action for some reason
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#24282B"
        },
        "emphasis": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": " #FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF9987"
                },
                "attention": {
                    "default": "#FF9D52",
                    "subtle": "#FFCA99"
                }
            },
            "backgroundColor": "#535759"
        },
        "good": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#17451E"
        },
        "accent": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#124052"
        },
        "warning": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#632926"
        },
        "attention": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#543511"
        }
    },
    "actions": {
        "maxActions": 5,
        "buttonSpacing": 8,
        "showCard": {
            "actionMode": "Inline",
            "inlineTopMargin": 8,
            "style": "emphasis"
        },
        "style": "emphasis",
        "preExpandSingleShowCardAction": false,
        "actionsOrientation": "Vertical",
        "actionAlignment": "stretch"
    },
    "adaptiveCard": {
        "allowCustomStyle": false
    },
    "imageSet": {
        "maxImageHeight": 100
    },
    "media": {
        "allowInlinePlayback": false
    },
    "factSet": {
        "title": {
            "size": "Default",
            "color": "Default",
            "isSubtle": false,
            "weight": "Bolder",
            "wrap": true
        },
        "value": {
            "size": "Default",
            "color": "Default",
            "isSubtle": false,
            "weight": "Default",
            "wrap": true
        },
        "spacing": 10
    },
    "cssClassNamePrefix": null
}

呈现这张卡片：

自适应卡片示例

当positive我修改“containerStyles”->“default”->“foregroundColors”->“accent”->“default”下的十六进制值时，卡片似乎只会改变颜色，这对我来说是零意义（我只是通过试用发现这个和错误，因为文档不能很好地解释这一点）。

我还探索了使用可扩展性来呈现我自己的动作，但它似乎不受支持，因为没有ACRCardElementType动作枚举（只有动作集）。

结果我有这些问题：

  1. 为什么正面动作背景颜色会受到该特定属性的影响？

  2. 如何修改其他操作的背景颜色（以及它们如何获取当前值）？

  3. 有没有办法使用可扩展性来呈现这些操作按钮？

标签： iosswiftadaptive-cards

解决方案

恐怕现在只能使用 CSS 更改动作样式（所有按钮）。HostConfig 对按钮的颜色没有影响。

对于iOS，如果你熟悉XIB，你可以通过XIB来改变按钮的样式。https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/ios/native-styling

如果没有，则可以通过覆盖相应的渲染器来更新按钮等 UI 元素。https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/ios/extensibility

推荐阅读