botframework - 如何在自适应卡中设置列宽使其统一

Question

我正在尝试在自适应卡中询问用户信息。但是列大小不同，因此卡片看起来很笨拙。我怎样才能使它看起来很好，每个列集列之间的间隙均匀。我尝试使用 width as "Auto"，"Stretch"甚至尝试使用"50px"设置宽度，"100px"但我没有实现。

请帮助我。

编辑 1：添加代码

我正在用 C# 创建卡片
这是我的代码

AdaptiveCard card = new AdaptiveCard()
    {
        Body = new List<AdaptiveElement>()
        {
            new AdaptiveColumnSet()
            {
                 Columns = new List<AdaptiveColumn>
                 {
                     new AdaptiveColumn()
                     {
                         Items = new List<AdaptiveElement>()
                         {
                             new AdaptiveTextBlock()
                             {
                                  Text="*First Name",
                                  Weight = AdaptiveTextWeight.Bolder
                              },
                         } ,
                         Width = AdaptiveColumnWidth.Auto
                     },
                      new AdaptiveColumn()
                      {
                           Width = AdaptiveColumnWidth.Auto,
                           Separator = true,
                           Items=new List<AdaptiveElement>()
                            {
                                new AdaptiveTextInput()
                                {
                                    Id = "FirstName",
                                    MaxLength = 300,
                                    Style = AdaptiveTextInputStyle.Text,
                                },
                           }
                      }
                 }
            }, // First Name
            new AdaptiveColumnSet()
            {
                Columns = new List<AdaptiveColumn>
                {
                    new AdaptiveColumn()
                    {
                        Items = new List<AdaptiveElement>()
                        {
                            new AdaptiveTextBlock()
                            {
                                 Text="Middle Name",
                                  Weight = AdaptiveTextWeight.Bolder
                            },
                        }
                    },
                    new AdaptiveColumn()
                    {
                         Width = "stretch",
                         Separator = true,
                         Items=new List<AdaptiveElement>()
                          {
                              new AdaptiveTextInput()
                              {
                                  Id = "MiddleName",
                                  MaxLength = 300,
                                  Style = AdaptiveTextInputStyle.Text,
                              },
                          }
                    }
                 }
            },
            new AdaptiveColumnSet()
            {
                Columns = new List<AdaptiveColumn>
                {
                    new AdaptiveColumn()
                    {
                        Items = new List<AdaptiveElement>()
                        {
                             new AdaptiveTextBlock()
                             {
                                  Text="*Last Name",
                                  Weight = AdaptiveTextWeight.Bolder
                             },
                         }
                    },
                    new AdaptiveColumn()
                    {
                         Width = "stretch",
                         Separator = true,
                         Items=new List<AdaptiveElement>()
                         {
                             new AdaptiveTextInput()
                             {
                                 Id = "LastName",
                                 MaxLength = 300,
                                 Style = AdaptiveTextInputStyle.Text,

                             },

                         }

                    }

                }

            },
            new AdaptiveColumnSet()
            {
               Columns = new List<AdaptiveColumn>
               {
                   new AdaptiveColumn()
                   {
                       Items = new List<AdaptiveElement>()
                       {
                           new AdaptiveTextBlock()
                           {
                               Text="*Date Of Birth",
                               Weight = AdaptiveTextWeight.Bolder
                           },
                       }
                   },
                    new AdaptiveColumn()
                    {
                         Width = "stretch",
                         Separator = true,
                         Items=new List<AdaptiveElement>()
                         {
                             new AdaptiveDateInput()
                             {
                                 Id = "DoB",

                             },

                         }

                    }

               }

            }, // Date Of Birth
        }
    };

标签： botframeworkadaptive-cards

Answer 1

首先，如果您看一下模板，您可以更轻松地控制您的卡。

在这样的代码中创建卡片已经过时了，你仍然可以使用它，但是直接使用 json 和模板更方便。

要回答您的问题，是的，您可以设置像素、拉伸、自动或加权的列宽。与此示例类似：

        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "width": 25,
                "horizontalAlignment": "Center",
                "verticalContentAlignment": "Center"
            },
            {
                "type": "Column",
                "width": "stretch"
            }
        ]

您必须将示例中的所有标签列设置为相同的大小。最简单的方法是将它们设置为固定宽度或加权。

如果这不起作用，请确保该术语使用正确，您必须使用小写的“拉伸”，并且当加权时宽度必须是整数，您可以在设计器中尝试此操作。自适应卡片本身并不真正关心“拉伸”或“拉伸”，但例如网络聊天有一些问题，卡片版本必须与您的主机支持的相匹配。

最简单的方法，这就是模板再次出现的地方，是在设计器中设计和试用你的卡片。如果它在设计器中很好，它通常在您要渲染卡的主机中。

希望这对你有帮助