Egret之eui.Scroller

本文介绍使用EUI框架实现特定布局效果的方法,包括CellSkin与ScrollerSkin的自定义创建过程,以及如何通过代码控制滚动视图的初始显示位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(纯码农制作 ,不喜勿喷)先看看结果 :
Egret之eui.Scroller

一 : Cell(render) Skin 的制作:
Egret之eui.Scroller

看结果是横向的滚动 , 向左 。 如果第一次显示第二个cell , 那么需向左滑动Cell的宽度 + Cell直接的横向的间隔(我这里设为10,往下看↓), 那么一个需要向左偏移110 。(当然 , 内边距左为0↓)

二:Scroller Skin的制作
Egret之eui.Scroller

三 :Cell代码:

module demo{
    /**
     * scroll Cell
     * @author Husz
     */
    export class ScrollCellRender extends eui.ItemRenderer{
        private txt_scroll : eui.Label = null;
        public constructor(){
            super();
            this.skinName="resource/eui_skins/ScrollCellSkin.exml";
        }

        protected dataChanged():void{
            let $data : IScrollCellRenderModel = <IScrollCellRenderModel>this.data;
            this.txt_scroll.text = $data._des;
        }
    }

    export interface IScrollCellRenderModel{
        _des : string;
    }
}

四 : Scroll 显示对象测试类:

module demo{
    export class ScrollDemoView extends eui.Component implements eui.UIComponent{
        private scroll : eui.Scroller = null;
        private datagroup : eui.DataGroup = null;

        private _arrayCollection : eui.ArrayCollection = null;

        public constructor(){
            super();
            this.skinName = "resource/eui_skins/ScrollDemoSkin.exml"
        }

        protected childrenCreated():void{
            super.childrenCreated();
            this.showScroll();
        }

        private showScroll() : void{
            this.initData();
            this.datagroup.itemRenderer = ScrollCellRender;
            this.datagroup.dataProvider = this._arrayCollection;

            //对eui.Scroller
            this.scroll.viewport.validateNow();
            this.scroll.viewport.scrollH = 110;

            this.scroll.verticalScrollBar.autoVisibility = false;
            this.scroll.verticalScrollBar.visible = false;

            //不允许滚动
            // this.scroll.touchEnabled = false;
            // this.scroll.touchChildren = false;
            //不允许滚动
            this.scroll.scrollPolicyH = eui.ScrollPolicy.OFF;

            this._arrayCollection.replaceItemAt( { _des :  "bbb"} , 1 );
        }

        private initData() :void{
            let $testDataArr : Array<IScrollCellRenderModel> = [
                {_des : "a"},
                {_des : "b"},
                {_des : "c"},
                {_des : "d"},
                {_des : "e"},
                {_des : "f"},
                {_des : "g"},
                {_des : "h"},
                {_des : "i"},
                {_des : "j"}
            ];
            this._arrayCollection =new eui.ArrayCollection($testDataArr);
        }
    }
}

注 : 
①:
//不允许滚动
// this.scroll.touchEnabled = false;
// this.scroll.touchChildren = false;
//不允许滚动
this.scroll.scrollPolicyH = eui.ScrollPolicy.OFF;

                注释的代码与其运行的代码的效果一致 , 都为禁止滚动。

② : this.scroll.viewport.scrollH = 110;

                    显示第二个Cell ,最左边应该是b , 但是 this._arrayCollection.replaceItemAt( { _des :  "bbb"} , 1 );
                    所以显示为bbb

③ : 关于隐藏滑块
Egret之eui.Scroller

如下:
<?xml version="1.0" encoding="utf-8"?>

<e:Skin xmlns:e="http://ns.egret.com/eui" class="skins.ScrollerSkin" minWidth="20" minHeight="20">  
  <e:HScrollBar id="horizontalScrollBar" width="100%" bottom="0" autoVisibility="false" visible="false"/>  
  <e:VScrollBar id="verticalScrollBar" height="100%" right="0" autoVisibility="false" visible="false"/> 

</e:Skin>












本文转自Aonaufly51CTO博客,原文链接: http://blog.51cto.com/aonaufly/2068793,如需转载请自行联系原作者








<think>根据用户的问题,用户希望在EgretWing中调整eui.List的数据显示为右对齐。eui.List是Egret EUI库中的一个列表组件,用于显示数据集合。要调整其对齐方式,通常需要自定义项渲染器(itemRenderer)并在其中设置文本或其他组件的文本对齐方式。 步骤: 1.创建一个自定义的项渲染器(例如,继承eui.ItemRenderer)。2.在自定义项渲染器中,将需要右对齐的文本组件的`textAlign`属性设置为`egret.HorizontalAlign.RIGHT`。 3.将List的itemRenderer设置为这个自定义项渲染器。示例:首先,创建一个自定义项渲染器类,例如`RightAlignItemRenderer`:```typescriptclass RightAlignItemRenderer extendseui.ItemRenderer{private label: eui.Label;constructor(){super();this.label =new eui.Label();//设置文本右对齐this.label.textAlign= egret.HorizontalAlign.RIGHT;this.addChild(this.label);}protected dataChanged():void {if(this.data){this.label.text= this.data.toString(); //根据实际数据结构调整}}} ```然后,在创建List时,设置其itemRenderer为这个自定义类: ```typescriptletlist =new eui.List(); list.itemRenderer= RightAlignItemRenderer;//设置数据提供者list.dataProvider =new eui.ArrayCollection([/*数据数组 */]); ```如果使用EXML定义自定义项渲染器,则更常见。例如,创建一个`RightAlignItemRenderer.exml`: ```xml<?xmlversion="1.0"encoding="utf-8"?> <e:ItemRendererxmlns:e="http://ns.egret.com/eui"><e:Label id="labelDisplay"textAlign="right" width="100%" height="100%"verticalAlign="middle"/> </e:ItemRenderer> ```然后在代码中关联这个EXML:```typescriptclass RightAlignItemRenderer extendseui.ItemRenderer{public labelDisplay:eui.Label;//必须与EXML中的id一致public constructor() {super();this.skinName= "RightAlignItemRenderer"; //假设EXML文件在默认路径下}protecteddataChanged(): void{if (this.data&& this.labelDisplay) {this.labelDisplay.text =this.data.toString();}}} ```最后,同样将List的itemRenderer设置为这个自定义渲染器类。 注意事项: -确保EXML文件被正确加载(通常Egret Wing会自动处理)。-如果列表项中有多个文本元素,需要分别设置对齐方式。-如果希望整个列表项内容右对齐,可能需要调整布局,比如设置`horizontalAlign`为`right`(如果使用布局容器)。另外,根据引用[1]中提到的`eui.ArrayCollection`,它是具有事件派发能力的数组,当数据改变时可以自动更新视图。因此,设置数据提供者时使用`eui.ArrayCollection`可以方便数据绑定。 如果用户的问题是关于如何调整现有列表项中文本的对齐方式,那么通过自定义项渲染器并设置文本组件的`textAlign`属性是最直接的方法。相关问题: 1.如何在Egret EUI中自定义列表项渲染器?2.EgretList组件的数据绑定如何实现? 3.如何调整EUI组件的文本对齐方式?</think>在 EgretWing 中调整 eui.List 数据的右对齐显示,需要通过自定义项渲染器(itemRenderer)来实现。以下是具体步骤: ### 解决方案 1. **创建自定义项渲染器**: ```typescript class RightAlignRenderer extends eui.ItemRenderer { private label: eui.Label; constructor() { super(); this.label = new eui.Label(); this.label.textAlign = "right"; // 关键:设置右对齐 this.label.verticalAlign = "middle"; this.label.percentWidth = 100; // 宽度100%填充 this.addChild(this.label); } protected dataChanged(): void { if (this.data) { this.label.text = this.data.toString(); // 显示数据 } } } ``` 2. **应用自定义渲染器**: ```typescript const list = new eui.List(); list.itemRenderer = RightAlignRenderer; // 使用自定义渲染器 list.dataProvider = new eui.ArrayCollection(["数据1", "数据2", "数据3"]); ``` 3. **EXML 皮肤实现**(替代方案): ```xml <!-- RightAlignRenderer.exml --> <e:Skin xmlns:e="http://ns.egret.com/eui"> <e:Label text="{data}" textAlign="right" verticalAlign="middle" left="0" right="0" top="0" bottom="0"/> </e:Skin> ``` 代码中关联皮肤: ```typescript class RightAlignRenderer extends eui.ItemRenderer { constructor() { super(); this.skinName = "RightAlignRenderer"; // 关联EXML } } ``` ### 关键点说明 1. **文本对齐控制**: - 核心属性 `textAlign = "right"` - 垂直居中 `verticalAlign = "middle"` 2. **布局适配**: - 设置 `percentWidth=100` 让标签填满整个单元格 - 在 EXML 中使用 `left="0" right="0"` 实现相同效果 3. **数据绑定**: - 通过 `dataChanged()` 方法更新显示内容 - EXML 中使用 `{data}` 语法自动绑定数据[^1] ### 效果对比 | 默认对齐 | 右对齐实现 | |---------|-----------| | 左对齐文本 | ![右对齐效果](right-aligned-list.png) | | 无法修改对齐方式 | 文本靠右显示 | > 提示:如果列表包含复杂内容,可在自定义渲染器中添加更多组件并分别设置对齐方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值