egret_eui容器

最新推荐文章于 2023-05-13 11:44:18 发布
原创 最新推荐文章于 2023-05-13 11:44:18 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#egret #白鹭引擎 #h5动画 #h5游戏引擎 #h5游戏

eui容器:

容器的显著特点: 可以配置一个layout对象, 来实现不同的布局方式
四大容器:

详细资料: http://edn.egret.com/cn/docs/page/609

eui.Group: 最轻量级容器, 不可以设置皮肤和外观

  • 如果自定义类继承eui.Group内部的其它对象应该在createChildren()方法中创建和添加
  • 需要覆写eui.Group的createChildren()方法。

eui.ViewStack: 层叠容器, 可以在ViewStack中添加多个子项, 但只显示其中一个。

  • 通过设置selectedIndex或者selectedChild来控制当前显示的子项

eui.Panel: 面板容器, 它和Group的区别在于, 可以给它附加皮肤

  • 最常用的就是用来做提示面板, 给他附加一个皮肤, 并设置一个标题栏和关闭按钮

eui.Scroller: 滚动控制容器, egret是使用canvas实现的, 浏览器的"滚动"功能是默认关闭的

  • 需要实现浏览器的"滚动"效果, 需要自己去"虚拟实现", 实现流程如下:
  • 实例化eui.Scroller对象 -> 设置位置和尺寸 -> 把需要"滚动"的容器设置到实例的viewport属性

DataGroup: 数据容器, 类似于前端中通过<ul>、<li>遍历数据来展示数据, 只要设置一个<li>的样式样板

  • 在DataGroup中通过改实例的itemRenderer属性来设置样板数据
  • 样式数据的值是一个继承eui.ItemRenderer的类的实例
  • 大数据优化, 通过DataGroup的usevirtualLayout来实现, 一般配合Scroller 来实现
egret_eui数据集合
张庆超的博客
01-11 1995
eui数据集合: 详细资料: http://edn.egret.com/cn/docs/page/527 eui.DataGroup: 数据容器, 类似于前端中通过、遍历数据来展示数据, 只要设置一个的样式样板 在DataGroup中通过改实例的itemRenderer属性来设置样板数据样式数据的值是一个继承eui.ItemRenderer的类的实例大数据优化, 通过Data
游戏前端学习（一） typescript + egret + egret-EUI系列
qq_36024963的博客
09-28 1814
本系列主要是我的工作学习历程，包括日常采坑，游戏相关的编程、语法、扩展库等。所以文章会有点流水账的形式。  最近找了份新的工作，主要是微信小游戏开发的，由于我拥有 Java、JavaScript、微信小程序开发等基础，所以目前主要补充的知识点有 typescript、egret、包括 egret 的扩展类库：egret-eui。 工作第一天： 我选择从 Egret Engline 2D ...
egret eui 例子
12-03
白鹭 eui 例子基本介绍 EUI是一套基于Egret核心显示列表的UI扩展库，它封装了大量的常用UI组件，能够满足大部分的交互界面需求，即使更加复杂的组件需求，您也可以基于EUI已有组件进行组合或扩展，从而快速实现需求。EUI里可以使用 EXML 来开发应用界面，标签式的语法更加适合 UI 开发， EXML 开发可以做到 UI 与逻辑代码的分离，更利于团队协作和版本迭代。
egret 使用EUI开发UI界面
哲学天空的博客
10-13 5051
按照官网文档使用EUI开发，失败！网上找了其他博客终于解决。记录如下： 1.新建项目，项目中添加eui界面制作库。 2. 新建EUI组件。 3.会出现下面错误提示，没办法，自己手动创建default.thm.json文件，文件中添加 {} 即可，后面创建的eui组件信息会自动添加到该文件中。 4.在src文件下新建EUI组件，现在可以创建了。 5. 添加控件到e...
Egret引擎的EUI基础使用教程
热门推荐
林洪炳的日常技术积累
12-13 3万+
由于Egret引擎的EUI扩展库的官方文档写得十分复杂，让很多开发者短时间内难以入手并且走了不少坑，在这里我将教你Egret引擎的扩展库EUI的基本使用方法。废话不多说，一起开始吧!
Egret05-容器中的对象操作
芒种的农民
11-06 500
一、变换操作 1、锚点的操作 锚点，可以理解成对象坐标位置的参考点， 每个显示对象都包含一个锚点,默认在对象的左上角位置。 为了做对比，我们用代码画了4个正方形，两个黄色的正方形设置X轴锚点位置=30，粉红色的正方形不设置X轴锚点，如下： /**** 黄色正方形shape1、shape2分别旋转10,30度，且X轴锚点位置都修改为30 */ var shape1:e...
egret 中 eui.Group 点击穿透
第7维度 - 日常笔记
01-01 2883
给要穿透的 eui.Group 设置： touchChildren = false; touchEnadled = false;   给要点击的 eui.Group 设置： touchChildren = true; touchEnadled = false;   这样就可以穿透上层的 group 点击到下层 group 中的元素了   如果是图片透明区域穿透的话，设置：（只针...
Egret引擎基础教程II（EUI基础使用教程）
毛毛虫的博客
07-26 1528
由于Egret引擎的EUI扩展库的官方文档写得十分复杂，让很多新手短时间内难以入手并且走了不少坑，在这里我将教你Egret引擎的扩展库EUI的基本使用方法。废话不多说，一起开始吧! 第一步：创建EUI组件 首先找到项目结构左侧 右键→src→新建模板文件→新建EUI组件。如下图： 点击新建EUI组件 弹出下图 类名：LoginScene 是否生成EXML文件：是 是否生成TS文件：是 皮肤默...
在 EgretWing 中 eui.list 显示的数据怎么靠右边开始显示
07-02
根据用户的问题，用户希望在EgretWing中调整eui.List的数据显示为右对齐。eui.List是Egret EUI库中的一个列表组件，用于显示数据集合。要调整其对齐方式，通常需要自定义项渲染器（itemRenderer）并在其中设置文本或...
egret-docs：白鹭文档
02-05
显示对象和显示容器 显示容器 绘制 遮罩 碰撞检测 文字 事件机制 网路 位图纹理 颜色效果 时间控制 多媒体 渲染模式 屏幕适应 调试 命令行扩展插件 调用原生JS 打包发布 3D引擎相关文档 更新详情 历史更新 开始...
EUI学习之Group
乡村兽医的博客
11-09 776
简单容器( Group ) http://developer.egret.com/cn/github/egret-docs/extension/EUI/container/group/index.html 官网介绍。 其中需要注意的: 1.Group 和所有其他 UI 组件都遵循一个原则：组件在没被外部显式设置尺寸(直接设置 width/height)的前提下。会自己测量出一个“合适”的大小。这时...
Egret 滚动控制容器(Scroller)和列表List
阳仔博客
06-26 1万+
屏幕的尺寸总是有限的，当内容已经超出屏幕的范围时，需要特殊的处理方式。EUI 利用滚动条实现此功能。通过拉动滚动条，可以在有限的屏幕中浏览全部内容。在其他引擎中我们可以使用TableView或者ScrollView来实现这些效果，在Egret中怎么使用呢，有两个办法实现。 一、使用滚动控制容器（Scroller） 二、使用滚动控制容器（Scroller） + 列表组合的方式（List） 还对...
Egret Scroller 设置滚动条
CodeP1G的博客
05-06 2825
在 Egret Engine 3.0.3 优化了 Scroller 的体验。当我们使用 Scroller 实现一些滚动区域的效果时，会发现右侧有一个滚动条(ScrollBar)，默认是自动隐藏的。即当我们不滚动区域时时不会显示该滚动条的。现在可以使用 ScrollBar （VScrollBar 和 HScrollBar） 的autoVisibility属性，设置是否自动隐藏该滚动条。具体是如下的...
EUI多图片轮播滑动效果
qq_42867580的博客
05-28 1267
一、实现原理 1、EUI中Scroller组件的使用。 2、监听eui.Sroll的CHANGE_START和CHANGE_END事件；根据鼠标滑动距离，来改变视口viewport.scrollH，达到图片滑动 的效果。 二、具体实现方法 1、首先新创建一个EUI组件。 2、将Scroller组件拖入到场景中，调整Scroller的尺寸与需要滚动播放的image的尺寸一致，创建两个bu...
Egret Scroller + List 实现滑动列表
wuhaishengxxx的专栏
02-04 1万+
eui.Scroller 滚动控制容器,是一个常用的组件，详见官方链接： http://developer.egret.com/cn/github/egret-docs/extension/EUI/container/scroller/index.html Scroller 滑动列表是在UI中常用的一个组件之一，比如在背包物品列表、商品列表、成就列表、任务列表等，通常会有许多项，少的几个多者上百
egret 滚动列表示例
Mediary的博客
10-20 391
暂存一下https://my.oschina.net/wxqdoit/blog/2907116
Egret eui.Scroller扩展
u012889793的博客
08-21 748
支持任意位置索引的增加和删除 支持移动到顶部，底部以及任意索引位置 支持官方eui.Scroller item填不满可视视图不能滑动的问题 新增支持下拉刷新 只会显示可视区域item以及缓冲item，默认四个 效果图： 下载demo地址：https://github.com/a834286983/project/blob/master/SuperScr...
学习Eegret UI Editor-如何使用自己做的exml皮肤文件
m0_46790912的博客
05-13 875
根据白鹭官方的B站教程，使用这个exml文件的核心就是要将添加到stage舞台的类和这个exml文件绑定起来，有两种方式，接下来听我好好地给大伙娓娓道来（装上一逼）。如果你问我为什么要继承类这个又实现那个接口的话，那我只能说，“想知道我的秘密吗？之后源码会对skinName进行一个解析（对，想知道就去看源码，这里不方便说太多，因为我懒）做完上面步骤之后，最重要一步来了，就是别忘了在入口类里将你的场景类添加到舞台上，注意每个组的最后一行，都是我新添加进去的，然后Ctrl+S保存，直接运行，搞定。
Egret）scroller滚动条滚动到最底
Taotao的优快云之家
01-06 9832
------------------gui list.validateNow(); list.dataGroup.verticalScrollPosition = list.dataGroup.contentHeight - list.height; --------eui this.ui_scroller.viewport = this.list; this.ui_scroller.val
EgretWing中改变eui.TabBar中数据位子
最新发布
08-02
<think>我们正在处理的问题：如何在EgretWing中调整eui.TabBar的数据位置？ 根据引用内容，eui.TabBar是一个选项卡集合，它根据数据源显示一组按钮。通常，我们通过设置`dataProvider`属性来绑定数据源（如ArrayCollection或ViewStack）。调整数据位置可能涉及以下方面： 1. 调整TabBar内部按钮的布局（如水平/垂直方向、间距等） 2. 调整TabBar本身的位置（通过x,y坐标或锚点） 3. 调整数据源的结构（如改变数组的顺序） 根据引用[4]中的示例，TabBar的布局可以通过设置`layout`属性来调整，例如使用水平布局（HorizontalLayout）或垂直布局（VerticalLayout）。同时，我们也可以通过设置TabBar的x,y,horizontalCenter,verticalCenter等属性来调整它在容器中的位置。 具体步骤： 1. 在EgretWing中打开对应的exml文件（或代码）。 2. 找到TabBar组件，在属性面板中调整其位置属性（如x, y, horizontalCenter, verticalCenter等）或布局属性（如layout）。 如果问题是指调整TabBar内部每个选项卡的位置（比如按钮之间的间距、对齐方式等），则需要调整TabBar的布局（layout）属性。 示例：在exml中，我们可以这样设置一个水平布局的TabBar，并调整其位置： ```xml <e:TabBar id="tarbar" width="362" height="63" horizontalCenter="0" bottom="-16"> <e:layout> <e:HorizontalLayout gap="20"/> <!-- 这里gap属性可以调整按钮之间的间距 --> </e:layout> </e:TabBar> ``` 另外，如果需要在代码中动态调整，可以获取TabBar的layout属性并进行设置。例如： ```typescript // 假设tabBar是eui.TabBar的实例 let layout = new eui.HorizontalLayout(); layout.gap = 20; // 设置间距 tabBar.layout = layout; // 应用布局 ``` 如果问题是指调整整个TabBar组件在父容器中的位置，则可以通过设置TabBar的x,y等属性，或者使用锚点布局（如horizontalCenter, verticalCenter等）来实现。 因此，回答将围绕如何通过exml设计器调整位置以及通过代码调整布局展开。 注意：用户提到“调整数据位置”，可能是指视觉上的位置（布局）而非数据源中的顺序。如果是指数据源顺序，则需要调整数据源（如ArrayCollection）的数组顺序。 根据引用[3]和[4]，TabBar的数据源设置方式有两种： 1. 直接设置数据源为数组：tabBar.dataProvider = new eui.ArrayCollection([...]); 2. 与ViewStack关联：tabBar.dataProvider = viewStack; 若要调整数据源中选项卡的顺序，可以修改对应的数组或ViewStack中的子组件顺序。 因此，我们分情况讨论。 步骤总结： 一、调整TabBar在父容器中的位置（整体位置）： 1. 在exml设计器中，选中TabBar，在属性面板中调整位置属性（x, y, 水平居中，垂直居中，边距等）。 2. 在代码中，设置TabBar的x, y等属性。 二、调整TabBar内部按钮的布局（内部布局）： 1. 在exml中，通过TabBar的layout属性设置布局方式（水平或垂直）以及布局参数（如间隙gap、内边距padding等）。 2. 在代码中，创建新的布局对象并赋值给TabBar的layout属性。 三、调整数据源顺序（改变选项卡顺序）： 1. 如果数据源是数组，则调整数组元素的顺序，然后刷新数据源（如ArrayCollection的refresh()方法）。 2. 如果数据源是ViewStack，则调整ViewStack中子组件的顺序（通过改变child的索引），然后TabBar会自动同步。 下面我们给出详细说明。</think>### 在 EgretWing 中调整 eui.TabBar 数据位置的方法 在 Egret 的 EUI 框架中，调整 `eui.TabBar` 的数据位置主要通过以下两种方式实现： #### 1. **通过 EXML 布局文件调整**（推荐） 在皮肤文件中直接设置布局属性： ```xml <e:TabBar id="tarbar" horizontalCenter="0" <!-- 水平居中 --> bottom="-16" <!-- 距底部位置 --> width="362" height="63"> <e:layout> <e:HorizontalLayout gap="20" <!-- 按钮间距 --> paddingLeft="10" <!-- 左内边距 --> paddingRight="10"/> </e:layout> </e:TabBar> ``` 关键属性： - `horizontalCenter`/`verticalCenter`：相对容器中心定位 - `top`/`bottom`/`left`/`right`：绝对定位 - `layout`：内部按钮布局（`HorizontalLayout` 或 `VerticalLayout`） - `padding`：控制数据区域与容器的边距 - `gap`：调整按钮间距[^4] #### 2. **通过 TypeScript 代码动态调整** ```typescript // 获取TabBar实例 const tabBar = this.tarbar; // 调整整体位置 tabBar.x = 50; // X坐标 tabBar.y = 100; // Y坐标 // 调整内部布局 const layout = new eui.HorizontalLayout(); layout.gap = 30; // 按钮间距 layout.paddingLeft = 20; // 左侧内边距 layout.horizontalAlign = "center"; // 水平居中 tabBar.layout = layout; // 应用新布局 // 刷新显示 tabBar.invalidateLayout(); ``` ### 注意事项 1. **数据绑定同步** 如果关联了 `ViewStack`，位置调整后需确认索引同步： ```typescript this.tabBar.dataProvider = this.viewStack; // 绑定数据源[^1] ``` 2. **响应式定位** 使用百分比或相对定位属性（如 `horizontalCenter`）可自适应不同屏幕尺寸。 3. **层级关系** 确保 `TabBar` 在容器中的层级正确，避免被其他组件遮挡。 --- ### 相关问题 1. 如何实现 `eui.TabBar` 与 `ViewStack` 的联动点击事件处理？ 2. 在移动端如何优化 `TabBar` 的触摸区域和响应体验？ 3. 如何动态修改 `TabBar` 的按钮样式（如选中状态图标）？ 4. 当 `TabBar` 数据源更新后如何强制刷新布局？ [^1]: eui.TabBar 数据绑定机制 [^3]: TabBar 与 ViewStack 事件交互 [^4]: EXML 布局参数配置方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值