apache-flex 如何创建具有背景颜色的滚动组?

4ioopgfo  于 2022-11-01  发布在  Apache
关注(0)|答案(2)|浏览(225)

我使用的是Flash Builder 4 Premium。我的应用程序有一个标题栏,但我不想滚动,而标题栏下面的一个组应该滚动。下面是我希望能够滚动的组:

<s:Scroller id="scrlMemberManager" includeIn="MemberManager" y="79" width="100%" height="100%" creationComplete="memberManagerInit()">
    <s:Group id="grpMemberManager">
        <s:Rect top="0" left="0" width="100%" height="100%">
            <s:fill>
                <s:SolidColor color="#bdbec0" />
            </s:fill>
        </s:Rect>
        <s:Panel id="pnlCenterMembers" width="597" height="444" x="10" y="5" title="Center Members">
            <s:Panel x="7" y="9" width="259" height="388" title="Create Member" dropShadowVisible="false">
                <s:TextInput x="71" y="11" width="164" id="txtCenterNewMemName" creationComplete="setUpTabKey(txtCenterNewMemName, null, txtCenterNewMemEmail)"/>
                <s:Label x="6" y="18" text="Name" width="60" textAlign="right"/>
                <s:TextInput x="71" y="41" width="164" id="txtCenterNewMemEmail" creationComplete="setUpTabKey(txtCenterNewMemEmail, txtCenterNewMemName, cboCenterNewMemGroup)"/>
                <s:Label x="6" y="48" text="Email" width="60" textAlign="right"/>
                <s:ComboBox x="71" y="71" width="164" id="cboCenterNewMemGroup" creationComplete="{ newMemGroup_creationCompleteHandler(event);  setUpTabKey(cboCenterNewMemGroup, txtCenterNewMemEmail, null); }" textAlign="center" dataProvider="{getCenterGroupNamesResult.lastResult}" />
                <s:Button x="165" y="101" label="Create" click="createUser('Center')" id="btnCenterCreateNewMem"/>
                <s:Label x="6" y="78" text="Group" width="60" textAlign="right"/>
            </s:Panel>
            <s:Panel x="274" y="10" width="314" height="388" title="Member List" dropShadowVisible="false" id="pnlCenterMemberList">
                <mx:DataGrid x="10" y="10" width="294" height="275" id="grdCenterMemberList" dataProvider="{getCenterMembersResult.lastResult}" allowMultipleSelection ="true" dragEnabled="false">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Member Name" dataField="username"/>
                    </mx:columns>
                </mx:DataGrid>
                <s:Button x="10" y="295" label="Add To / Rem From Group" width="140" id="btnCenterAssignToGroup" click="assignMemberToGroup('Center')" fontSize="9"/>
                <s:Button x="10" y="324" label="Change Password" width="140" id="btnCenterChangePassword" click="changePassword('Center')" visible="false"/>
                <s:Button y="295" label="Delete" width="140" id="btnCenterDeleteMember" click="deleteMember_clickHandler(event)" right="9"/>
            </s:Panel>
        </s:Panel>
        <s:Panel id="pnlOnlineMembers" width="597" height="444" x="627" y="5" title="Our Online Members">
            <s:Button y="-26" id="btnSwitchOnlineMembers" label="Show All Online Members" width="170" right="7" click="switchOnlineMembers()"/>
            <s:Panel x="7" y="9" width="259" height="388" title="Create Member" dropShadowVisible="false">
                <s:Label x="6" y="18" text="Name" width="60" textAlign="right"/>
                <s:Label x="6" y="48" text="Password" width="60" textAlign="right"/>
                <s:Label x="6" y="108" text="Email" width="60" textAlign="right"/>
                <s:Label x="6" y="138" text="Group" width="60" textAlign="right"/>
                <s:Label x="6" y="71" text="Confirm Password" width="60" textAlign="right"/>
                <s:TextInput x="71" y="11" width="164" id="txtOnlineNewMemName" creationComplete="setUpTabKey(txtOnlineNewMemName, null, txtOnlineNewMemPassword1);"/>
                <s:TextInput x="71" y="41" width="164" id="txtOnlineNewMemPassword1" displayAsPassword="true" creationComplete="setUpTabKey(txtOnlineNewMemPassword1, txtOnlineNewMemName, txtOnlineNewMemPassword2);"/>
                <s:TextInput x="71" y="71" width="164" id="txtOnlineNewMemPassword2" displayAsPassword="true" creationComplete="setUpTabKey(txtOnlineNewMemPassword2, txtOnlineNewMemPassword1, txtOnlineNewMemEmail);"/>
                <s:TextInput x="71" y="101" id="txtOnlineNewMemEmail" width="164" creationComplete="setUpTabKey(txtOnlineNewMemEmail, txtOnlineNewMemPassword2, cboOnlineNewMemGroup);"/>
                <s:ComboBox x="71" y="131" width="164" textAlign="center" id="cboOnlineNewMemGroup" dataProvider="{getCenterGroupNamesResult.lastResult}" creationComplete="setUpTabKey(cboOnlineNewMemGroup, txtOnlineNewMemEmail, null);" />
                <s:Button x="165" y="160" label="Create" id="btnOnlineCreateNewMem" click="createUser('Online')"/>
            </s:Panel>
            <s:Panel x="274" y="10" width="314" height="388" title="Member List" dropShadowVisible="false">
                <mx:DataGrid x="10" y="10" width="294" height="275" id="grdOnlineMemberList" dataProvider="{onlineMembersArray}" allowMultipleSelection="true">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Member Name" dataField="username"/>
                    </mx:columns>
                </mx:DataGrid>
                <s:Button x="10" y="295" label="Add To / Rem From Group" width="140" id="btnOnlineAssignToGroup" click="assignMemberToGroup('Online')" fontSize="9"/>
                <s:Button x="10" y="324" label="Change Password" width="140" id="btnOnlineChangePassword" click="changePassword('Online')" visible="false"/>
                <s:Button x="163" y="295" label="Add To Our Center" width="140" id="btnOnlineAssignToCenter" click="assignMemberToCenter()" visible="false"/>
                <s:Button x="163" y="295" label="Remove From Center" width="140" id="btnOnlineRemoveFromCenter" click="removeMemberFromCenter()"/>
            </s:Panel>
        </s:Panel>
        <s:Button right="10" bottom="10" label="Admin Manager" id="btnAdminManager" visible="false" click="{ goToAdminManager(); }" creationComplete="{if (currentUserRights[center] == 'OWNER' || currentUserRights[center] == 'SUPERUSER') btnAdminManager.visible = true;}"/>
    </s:Group>
</s:Scroller>

乍一看,一切都很正常,但是如果你把屏幕做得足够小,直到你需要滚动的地方,背景色就不会填满整个滚动条,而只会填满你开始滚动之前最初显示的部分,所以你会得到如下所示的东西:

我不知道解决这个问题的最佳方法是什么,但我想我可以调整背景颜色矩形的大小以匹配滚动条的宽度......如果我能找出滚动条的宽度是多少的话。(希望我的术语是正确的)。有没有办法找到那个宽度,或者有没有更好的方法来做到这一点?每个面板的宽度都是设置好的,但是窗口的大小可能会延伸到内容的宽度之外,因此我希望确保背景填充用户的窗口(当然不包括标题栏),而不管窗口的大小。

czfnxgou

czfnxgou1#

我刚想到一个变通办法。
我将背景色矩形移到了滚动条的上方,并将其位置设置为与滚动条相同。因此,现在,它位于页面上滚动条的后面,具有相同的尺寸。因此,当您滚动组时,矩形没有滚动,您仍然可以看到背景色,因为滚动条和组的背景是透明的。

bd1hkmkf

bd1hkmkf2#

我使用的解决方案是将滚动条放在一个边框容器中。您可以将borderColor设置为任何值,这样就可以使它消失(如果您不希望看到滚动条放在容器中的视觉效果;在我的例子中,我使用了黑色轮廓,因为我希望容器的边框出现)。例如:

<s:BorderContainer width="340" height="100%" borderWeight="1" borderStyle="solid" borderColor="0x000000">
    <s:backgroundFill> 
        <s:SolidColor color="0xDDDDDD" alpha="1"/> 
             </s:backgroundFill>
    <s:Scroller width="100%" height="100%">                 
        ...
    </s:Scroller>
</s:BorderContainer>

相关问题