Flex移动的AIR应用程序：底部内容无法显示

Question

在Flash Builder 4.6中，我创建了一个Flex Mobile AIR项目。

为什么没有2个按钮或滚动条可见？

为什么我不能向下滑动以查看更多文本和2个按钮？

以下是我的完整且简单的源代码 -

“主页视图” - Agreement.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        title="HomeView">

    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" gap="10" />
    </s:layout>

    <s:Label text="Agreement" width="100%" textAlign="center" />

    <s:Label width="100%">
        <s:text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt rutrum felis eu tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In auctor erat nec ligula vestibulum porttitor ornare quam facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium elementum elit, vitae aliquet turpis facilisis tempus. Curabitur quis mi tellus, placerat bibendum erat. Vestibulum condimentum dolor eu purus fermentum pharetra. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tempus aliquam vehicula.

Ut porta commodo interdum. Vestibulum et magna non felis malesuada mollis eu a dolor. Vivamus non diam purus, quis ultricies mi. Maecenas pharetra lorem ac elit tempor bibendum. Fusce gravida, enim et cursus dignissim, augue lectus consequat diam, sit amet laoreet urna eros a nisi. Phasellus id lacinia elit. Nullam pharetra tempor lobortis. Morbi non orci eget tellus consectetur euismod sed in diam. Sed sit amet fringilla massa. Sed quis ligula diam, ut vulputate odio. Donec dapibus diam vel libero tincidunt eu laoreet mauris adipiscing.     </s:text>
    </s:Label>

    <s:Spacer height="100%" />

    <s:HGroup width="100%" gap="10">
        <s:Button label="I do not agree" width="50%" />
        <s:Button label="I agree" width="50%" />
    </s:HGroup>
</s:View>

这个应用程序本身 - Test.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.Agreement">

</s:ViewNavigatorApplication>

- Alexander Farber

Answer 1

请尝试以下方法：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        title="HomeView">
    <s:Scroller width="100%" height="100%">
        <s:VGroup width="100%" height="100%" paddingTop="10" paddingBottom="10" paddingLeft="10" gap="10">
            <s:Label text="Agreement" width="100%" textAlign="center" />

            <s:Label width="100%">
                <s:text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt rutrum felis eu tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In auctor erat nec ligula vestibulum porttitor ornare quam facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium elementum elit, vitae aliquet turpis facilisis tempus. Curabitur quis mi tellus, placerat bibendum erat. Vestibulum condimentum dolor eu purus fermentum pharetra. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tempus aliquam vehicula.

        Ut porta commodo interdum. Vestibulum et magna non felis malesuada mollis eu a dolor. Vivamus non diam purus, quis ultricies mi. Maecenas pharetra lorem ac elit tempor bibendum. Fusce gravida, enim et cursus dignissim, augue lectus consequat diam, sit amet laoreet urna eros a nisi. Phasellus id lacinia elit. Nullam pharetra tempor lobortis. Morbi non orci eget tellus consectetur euismod sed in diam. Sed sit amet fringilla massa. Sed quis ligula diam, ut vulputate odio. Donec dapibus diam vel libero tincidunt eu laoreet mauris adipiscing.     </s:text>
            </s:Label>

            <s:Spacer height="100%" />

            <s:HGroup width="100%" gap="10">
                <s:Button label="I do not agree" width="50%" />
                <s:Button label="I agree" width="50%" />
            </s:HGroup>
        </s:VGroup>
    </s:Scroller>
</s:View>

在Flex 4中，如果需要滚动，您需要使用Scroller来指定 :)

- J_A_X

Answer 2

您需要使用 Scroller。

正如文档所述，仅使用 Label 无法提供滚动：

Label 是最快和最轻的，但它的功能受到限制：没有复杂的格式设置，没有滚动，没有选择、编辑和超链接。

如果要包装任何可能大于显示器的内容，则不使用 Scroller 将会非常不方便。

对于您的情况：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        title="HomeView">

    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" gap="10" />
    </s:layout>

    <s:Label text="Agreement" width="100%" textAlign="center" />
    <s:Scroller width="100%" height="100%">
        <s:VGroup>
            <s:Label width="100%">
                <s:text>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt rutrum felis eu tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In auctor erat nec ligula vestibulum porttitor ornare quam facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium elementum elit, vitae aliquet turpis facilisis tempus. Curabitur quis mi tellus, placerat bibendum erat. Vestibulum condimentum dolor eu purus fermentum pharetra. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tempus aliquam vehicula.

                Ut porta commodo interdum. Vestibulum et magna non felis malesuada mollis eu a dolor. Vivamus non diam purus, quis ultricies mi. Maecenas pharetra lorem ac elit tempor bibendum. Fusce gravida, enim et cursus dignissim, augue lectus consequat diam, sit amet laoreet urna eros a nisi. Phasellus id lacinia elit. Nullam pharetra tempor lobortis. Morbi non orci eget tellus consectetur euismod sed in diam. Sed sit amet fringilla massa. Sed quis ligula diam, ut vulputate odio. Donec dapibus diam vel libero tincidunt eu laoreet mauris adipiscing.     </s:text>
            </s:Label>

            <s:Spacer height="100%" />

            <s:HGroup width="100%" gap="10">
                <s:Button label="I do not agree" width="50%" />
                <s:Button label="I agree" width="50%" />
            </s:HGroup>
        </s:VGroup>
    </s:Scroller>
</s:View>

- blahdiblah

---

“Label是最快速和最轻量级的”？这个说法的来源在哪里？无论是官方的Adobe文档还是2010/2011年MAX会议的演示日志都表明，StyleableTextfield在移动应用中是最快速的（紧随其后的是Label）。 - AlBirdie

在那个引用之前有几个链接指向“Label”的文档，那就是源代码。 - blahdiblah

啊，抱歉。我漏掉了。不过，据说StyleableTextfield比label更快，尽管在大多数应用程序中，除了ItemRenderer之外的性能差异可能并不重要。 - AlBirdie