• EUI ViewStack实现选项卡组件


    一  TabBar+ViewStack实现

    官网教程:http://developer.egret.com/cn/github/egret-docs/extension/EUI/dataCollection/tabBar/index.html

    这个教程确实没看懂...麻烦...

    二 RadioButton+ViewStack

    在exml中拖动组件RadioButton和ViewStack

    设置exml源码RadioButton的value值为0,1... 因为这个value值将会赋值给ViewStack 。并将第一个RadioButton的seleted=true,这样默认选中的第一项。

    <e:RadioButton id="radioBtn" label="选项1" x="28" y="30" width="150" height="50" value="0" selected="true">
                <e:skinName>
                    <e:Skin states="up,down,disabled">
                    <e:Image width="100%" height="100%" source="button_up_png" source.down="button_down_png"/>
                    <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
                    </e:Skin>
                </e:skinName>
            </e:RadioButton>
            <e:RadioButton label="选项2" x="184" y="30" width="150" height="50" value="1">
                <e:skinName>
                    <e:Skin states="up,down,disabled">
                    <e:Image width="100%" height="100%" source="button_up_png" source.down="button_down_png"/>
                    <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
                    </e:Skin>
                </e:skinName>
            </e:RadioButton>
            <e:RadioButton label="选项3" x="340" y="30" width="150" height="50" value="2">
                <e:skinName>
                    <e:Skin states="up,down,disabled">
                    <e:Image width="100%" height="100%" source="button_up_png" source.down="button_down_png"/>
                    <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
                    </e:Skin>
                </e:skinName>
            </e:RadioButton>

    ts中监听RadioButton的change事件,将value值传递给ViewStack,这样ViewStack就可以切换Group了。

    class HomScene extends eui.Component{
        private radioBtn:eui.RadioButton;
        private viewStack:eui.ViewStack;
    
        public constructor() {
            super();
            this.skinName = "HomeSceneSkin";
        }
    
        public childrenCreated(){
            this.radioBtn.group.addEventListener(eui.UIEvent.CHANGE, this.onChange ,this);
        }
    
        private onChange(e:eui.UIEvent){
            let radioGroup:eui.RadioButtonGroup = e.target;
            this.viewStack.selectedIndex = radioGroup.selectedValue;
        }
    }

    实际效果:

  • 相关阅读:
    apache的并发
    PHP 文件上传
    打包备份3天
    dz改写CSS
    linux cifs自动挂载远程windows硬盘或文件夹
    C++面向对象
    "i++"和"++i"
    《程序员面试宝典》一个程序
    《程序员面试宝典》强制转换,内存地址
    《程序员面试宝典》编程技巧--位运算
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/6250517.html
Copyright © 2020-2023  润新知