Flex中如何根据Label文本设置VGroup高度并解决编译报错

报错原因 #

MXML 遵循 XML 语法规范，不允许属性的外层包裹引号和属性值内部的字符串引号使用同类型符号。
你的代码中 height 属性外层用双引号包裹，内部判断条件、返回值的字符串也用了双引号，XML 解析器会把内部第一个双引号识别为 height 属性的结束标记，后续内容不符合标签语法规则，因此抛出你遇到的编译错误。

修复方案 #

以下两种写法均可直接替换原 VGroup 标签行解决问题：

方案1：表达式内部字符串用单引号（最常用） #

保持属性外层用双引号，把绑定表达式内所有字符串的包裹符换成单引号即可：

<s:VGroup  width="100%" height="{(titleDisplay.text == 'Create Pool')? '80%' : '100%'}" top="30">

方案2：属性外层用单引号 #

也可以反过来修改属性外层的引号类型，内部字符串保持双引号：

<s:VGroup  width="100%" height='{(titleDisplay.text == "Create Pool")? "80%" : "100%"}' top="30">

可选优化写法 #

如果后续逻辑复杂度提升，也可以把判断逻辑抽到 AS 脚本中，绑定函数返回值，更便于维护：

1. 脚本部分代码：

private function calcVGroupHeight():String {
    return titleDisplay.text == "Create Pool" ? "80%" : "100%";
}

2. VGroup 标签写法：

<s:VGroup  width="100%" height="{calcVGroupHeight()}" top="30">

内容的提问来源于stack exchange，提问作者Nirmalya