Как я могу создать группу прокрутки с цветом фона? - PullRequest
Новая
       22

Как я могу создать группу прокрутки с цветом фона?

2 голосов
/ 05 ноября 2010

Я использую 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>

На первый взгляд все работает нормально, но если вы сделаете экран достаточно маленьким, чтобы прокручивать его, цвет фона неНе заполняйте весь скроллер, только ту часть, которая первоначально отображается перед началом прокрутки, поэтому вы получите что-то похожее на это:

Background does not scroll

Я не уверен, чтоЛучший способ решить эту проблему, но я полагаю, я мог бы изменить цвет фона Rect, чтобы он соответствовал ширине скроллера ... если бы я мог узнать, какова ширина скроллера.Под шириной скроллера я подразумеваю ширину содержимого, которое он содержит, а не ширину его окна просмотра (надеюсь, моя терминология верна).Есть ли способ найти эту ширину, или есть лучший способ сделать это?Ширина каждой панели установлена, но размер окна может превышать ширину содержимого, поэтому я хочу убедиться, что фон заполняет окно пользователя (за исключением, конечно, строки заголовка), независимо от того, какой размер егоокно.

Ответы [ 2 ]

1 голос
/ 05 ноября 2010

Я только что нашел обходной путь.

Я переместил цвет фона Rect над скроллером и установил его положение на то же, что и у скроллера.Итак, теперь он находится за скроллером на странице с теми же размерами, поэтому при прокрутке группы Rect не прокручивается, и вы все равно можете видеть цвет фона, поскольку фоны скроллера и группы прозрачны.

0 голосов
/ 28 декабря 2012

Решение, которое я использовал, заключалось в том, чтобы поместить скроллер в пограничный контейнер. Вы можете установить 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>
...