Question

我有一个Flex自定义BorderContainer组件，里面有文本。如果我要在面板中的主应用程序中添加它，则BorderContainer超出面板的宽度范围，因为文本是设置的大小。我将所有组件的百分比都缩小，以便在缩小时重新调整大小，但是包含复选框和标签的一部分（许多带有文本的东西）会因字体大小不变而混乱。

我非常肯定我正在寻找的结果可以通过嵌入字体来完成，尽管我还没有能够从网上找到解决方案。我试图用CSS样式做这个，因为我将它用于许多不同的组件（我不想只是直接在flex代码中更改它）。

编辑解决方案：

我尝试使用www0z0k所建议的比率，但是当它快速调整大小或小屏幕时会导致一些严重的问题（组件不能正确调整大小，因为它会乘以最终似乎对我有用并且没有引起任何问题的是我运行代码并找到容器的width（1152）和height（842）。

然后我创建了一个宽度变量为widthX = 1152和heightY = 842的const变量，并且在onResize（）函数中，我编码了这样的调整大小：
（其中bottomGroup是我试图调整大小的borderContainer的id

bottomGroup.scaleX = width / widthX;;
bottomGroup.scaleY = height / heightY;

结束编辑

到目前为止，我已经找到了一些在<fx:Style>中嵌入字体的示例，并尝试删除fontSize的任何延迟，但这似乎不起作用。



<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    @font-face {
        src: url("fonts\Arial.ttf");
        fontFamily: myFontFamily;
        color: black;
        fontStyle: normal;
        fontWeight: normal;
        advancedAntiAliasing: false;
    }

    s|BorderContainer {
        fontFamily: myFontFamily;
    }   
</fx:Style>

<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @font-face { src: url("fonts\Arial.ttf"); fontFamily: myFontFamily; color: black; fontStyle: normal; fontWeight: normal; advancedAntiAliasing: false; } s|BorderContainer { fontFamily: myFontFamily; } </fx:Style>

如果有人有任何建议或知道我哪里出错了，我们将不胜感激。感谢。

编辑：显示我的问题的示例应用程序的 CustomContainer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:HGroup>
    <s:Label text="This is a label" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
</s:HGroup>

Main.mxml
<?xml version="1.0" encoding="utf-8"?> <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> <fx:Declarations>  </fx:Declarations> <s:HGroup> <s:Label text="This is a label" /> <s:Label text="Here is another which add up to take up quite a bit of horizontal space" /> <s:Label text="Here is another which add up to take up quite a bit of horizontal space" /> <s:Label text="Here is another which add up to take up quite a bit of horizontal space" /> </s:HGroup>

我希望能够将字体重新调整大小以适应面板。我无法提供我正在处理的实际代码，但是这个例子希望得到这个想法。

Answer 1

应该可以以类似的方式修改字体大小，但如果你有文字（你提到的复选框），你可以使用以下内容来修改字体大小：

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" resize="onResize();">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
    <![CDATA[

    private function onResize():void{
        var ratio:Number = width / measuredWidth;
        contentHolder.scaleX *= ratio;
        contentHolder.scaleY *= ratio;
    }

    ]]>
</fx:Script>

<s:HGroup id="contentHolder">
    <s:Label text="This is a label" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
</s:HGroup>
</s:BorderContainer>

Main.xml不需要修改

Answer 2

如果您在BorderContainer中的标签上设置了明确的宽度（例如100％），他们应该自动为您做行换行（请参阅：Label docs）。

如果你想真正改变字体大小（我会避免这种情况，因为它会在视觉上引起混淆，但这是另一个讨论）你应该能够改变标签的scaleX和scaleY属性，以便它们可以缩放完美地适合BorderContainer。您需要做的就是计算比例并应用它。

动态字体大小Flex 4在调整窗口/面板大小时调整大小

2 个答案: