火山PC从零开始学炫彩UI 第十一课
火山PC从零开始学炫彩UI 第十一课
作者：灰羊羊
一、本文学习内容
本文我们来学习列表的知识，先从简单的列表框（ListBox）开始学习。
本文学习的难点是模板，以及数据适配器
二、界面设计UI流程
打开我们以前用到的炫彩设计器项目。
首先，我们要在用户中心按钮所控制的基础元素布局ID101，里面放置一个列表框组件，此时，我们需要让101显示在最上层的位置，所以，我们需要将102,103,104的层次眼睛点掉。
![@ 底 0 ， 淞 （ 文 视 到 调 试 工 具 帮 炫 岿 言 ． 中 交 隔 程 《 DE 〔 磊 〕 ． v 1.1 项 目 视 到 起 始 页 一 火 山 零 基 诎 彩 课 程 些 课 0 0 炫 彩 素 材 1 0 O 一 已 远 块 用 F 中 心 0 列 汞 会 员 权 益 @ 定 位 功 能 应 用 中 心 •-@windowLJI [ 0 ] 一 ． buttonlJl [ 22 ] 一 ． buttonlJl [ 0 ] 一 ． bu 。 n [ 0 ] 一 ． buttonlJl [ 0 ] 一 ． bu 。 n [ 0 ] >„@editlJl [ 0 ]<br /> 一 ． buttonLJl [ 0 ]<br /> 一 ． elementlJl [ 0 ]<br /> > 一 ． elementlJl [ 0 ]<br /> 0 退 出<br /> 一 ． elementUl [ 101 ]<br /> 一 ． 5 peTe 对 [ 0 ]<br /> v„@elementlJl [ 102 ]<br /> „@shapeText[O]<br /> 一 ． elementlJl [ 10 引<br /> „@shapeText[O]<br /> v„@elementUl [ 104 ]<br /> „@shapeText[O]](https://www.lkuaiy.com/image/editor/1644924449894568.png)
这样子，最上面布局显示的就是我们的用户中心基础元素了
![项 目 视 到 起 始 页 火 山 零 基 诎 彩 程 课 0 0 炫 彩 素 材 0 0 O 一 已 远 块 0 用 户 中 心 会 员 权 益 @ 定 位 功 能 应 用 中 心 凭 户 中 心 目 视 到 》 块 vowindowlJI [ 0 ] 一 ． buttonLJl [ 22 ] 一 ． bu 。 n [ 0 ] 一 ． buttonlJl [ 0 ] 一 ． buttonlJl [ 0 ] 一 ． bu 。 n [ 0 ] >„@editlJl [ 0 ]<br /> 一 ． bu 。 n [ 0 ]<br /> 一 ． elementlJl [ 0 ]<br /> > 一 ． elementlJl [ 0 ]<br /> 0 退 出<br /> 一 ． elementlJl [ 101 ]<br /> —@shapeText[O]<br /> elementUI[102]<br /> 0<br /> 一 ． 5 peTe 对 [ 0 ]<br /> elementlJl [ 10 引<br /> elementlJl [ 104 ]](https://www.lkuaiy.com/image/editor/1644924450242791.png)
ok，下面我们来调整一个用心中心这个标签的位置，以及放置列表框组件
注意看，在放置的时候，不要将组件直接放置在窗口上，而是要放置在基础元素布局内部
![G) 底 0 ， 淞 （ 文 视 到 调 试 工 具 帮 炫 岿 言 ． 中 交 隔 程 《 DE 〔 磊 〕 ． v 1.1 Debug 项 目 视 到 起 始 页 一 火 山 零 基 诎 彩 课 程 些 课 亻 然 0 曰 一 炫 彩 素 材 u 《 元 素 基 诎 元 素 們 布 元 素 下 拉 组 台 框 巳 列 汞 框 0 0 O 列 见 到 - 工 具 景 一 已 远 块 0 进 过 条 “ 亠 怡 5 条 0 用 户 中 心 凭 户 中 心 囤 日 期 时 河 会 员 权 益 形 扰 对 象 回 形 伏 交 本 形 状 引 F @ 定 位 功 能 曰 形 画 线 形 状 坦 框 詡 形 状 表 相 巨 定 对 象 应 用 中 心 望 远 按 钮 多 远 按 钮 •-@windowLJI [ 0 ] 一 ． buttonlJl [ 22 ] 适 葒 入 性 名 称 〔 中 交 文 ． 一 ． buttonlJl [ 0 ] 名 称 listBoxlJI 一 ． bu 。 n [ 0 ] 一 ． buttonlJl [ 0 ] 一 ． bu 。 n [ 0 ] >„@editlJl [ 0 ]<br /> 一 ． buttonLJl [ 0 ]<br /> 名 称 〔 nam 到<br /> 一 ． elementlJl [ 0 ]<br /> 名 称 射 汞<br /> > 一 ． elementlJl [ 0 ]<br /> 0 退 出<br /> 一 ． elementUl [ 101 ]<br /> 一 ． 5 peTe 对 [ 0 ]<br /> 逶 明 度<br /> —@listBoxlJl [ 0 ]<br /> elementUI[102]<br /> 工 具 示<br /> „@shapeText[O]<br /> elementLJl [ 10 引<br /> „@shapeText[O]<br /> > 布 局 ． 项<br /> elementlJl [ 104 ]<br /> > 布 ． 笪 子<br /> „@shapeText[O]<br /> v 外 观<br /> 背 昱 信 息](https://www.lkuaiy.com/image/editor/1644924450461606.png)
下面来给列表框取一个名称，叫做列表框
到这里列表框创建好了，下面来创建模板文件
为什么要创建模板文件，什么是模板文件？
模板文件是一个模具，比如说印刷纸币时候，哪一个地方印刷什么颜色，哪一个地方印刷什么图案，这都是由一个纸币样板来控制的。也叫作模板。按照一个模板印刷出来的纸币，他们的样式格式都是相同的。
下面我们来通过真实的案例来学习
右键点击项目，选择新建文件
在弹出去的窗口中选择新建列表框模板，输入文件名称，这里可以自定义
可以看到，我们创建的列表框模板就创建好了，下面双击模板，进入设计视图
此时，我们可以看到，模板里面有一个大的UI，还有一个形状文本，选中形状文本，发现它绑定一个name1。
简单理解就是起个名字，但又不完全相同，您不能通过取对象从名称里面获取到这个组件，当然也没有这样子的用法
这里我先不讲绑定具体的意义，继续往下看
![（ 文 视 到 调 试 工 具 帮 项 目 视 到 火 山 零 基 诎 彩 程 课 0 炫 彩 素 材 一 已 远 块 ListBox.xml 一 ． layoutElelJl [ 0 ] —@shapeText[O] G) 底 0 ， 淞 起 台 页 引 nd [ 冶 怡 炫 岿 言 ． 中 交 隔 程 《 DE 〔 磊 〕 ． v ， 元 素 囗 基 酬 元 素 文 本 接 形 扰 对 象 回 形 伏 交 本 巨 定 对 象 望 远 按 钮 們 布 元 素 列 见 到 月 历 卡 片 形 状 片 多 远 按 钮 形 状 引 F 适 葒 入 性 名 称 〔 中 交 文 ． 名 称 ItemID 名 称 〔 na 名 称 射 汞 > 布 局 ． 项<br /> > 布 局 ． 子<br /> 外 观<br /> CSS ． 棰 苴<br /> shapeText<br /> namel](https://www.lkuaiy.com/image/editor/1644924450317146.png)
选中大的UI，然后在右边工具栏里面点击按钮，放置在布局里面，我们为模板里面再添加一个按钮组件
![（ 文 视 到 调 试 工 具 帮 项 目 视 到 一 火 山 零 基 诎 彩 课 程 些 课 一 炫 彩 素 材 一 已 远 块 ListBox.xml 一 ． layoutElelJl [ 0 ] @shapeText[O] G) 底 0 ， 淞 起 台 页 引 rid [ 冶 怡 炫 岿 言 ． 中 交 隔 程 《 DE 〔 磊 〕 ． v 1.1 0 元 素 基 诎 元 素 文 本 接 形 扰 对 象 园 形 文 本 巨 定 对 象 望 远 按 钮 們 布 局 元 素 列 见 到 月 历 卡 片 形 状 片 多 远 按 钮 滚 见 到 囤 日 期 时 河 形 状 引 F 按 钮 - 工 具 条 形 状 形](https://www.lkuaiy.com/image/editor/1644924449920669.png)
使用同样的方法，我们再添加一个形状文本
我们就得到了一个 文本、按钮、文本 的模板
![（ 文 视 到 调 试 工 具 帮 项 目 视 到 一 火 山 零 基 诎 彩 课 程 些 课 一 炫 彩 素 材 一 已 远 块 ListBox.xml 一 ． layoutElelJl [ 0 ] „@shapeText[O] 一 ． buttonlJl [ 0 ] 一 ． 5 peTe 对 [ 0 ] G) 底 0 ， 淞 起 台 页 引 rid [ 冶 怡 0 凵 t n Text810cki](https://www.lkuaiy.com/image/editor/1644924449933721.png)
下面来设计属性
选中按钮，我们给它绑定一个名称为name2，前面第一个形状默认绑定一个name1
这里，您可以认为模板里面每一个组件都要绑定一个名字，且不可以重复
然后在布局-项里面，这里 之前我没有讲过布局-项，是怕新手接触太早感到头疼
布局宽度这里有四个选项，自动，填充父，占剩余所有空间，占%空间
如果是自动，就像下面这个样子，他会根据按钮文本的长度，来合理设计按钮的宽度
如果设计了填充父，那么这一个组件的宽度就会占整个宽度，将其他两个按钮挤到一边去
占剩余所有空间，这个属性，是将这两个文本组件不要的，剩下的所有空间都占用上。
最后一个占%空间，这个属性，使得组件固定占用多少空间，不能多也能少，比如说布局大UI宽度为300，那么占用20%，就是占用60
给第二个文本绑定一个名称，name3
做好这一切，我们要保存修改，打包项目，然后打开以前用的火山项目
列表框是不能预览的，我们只有通过火山来添加项目浏览
打包这里简单演示一下，以前用过很多次，不多讲了
![工 具 帮 罰 @ 底 0 ， 淞 炫 岿 言 ． 中 交 隔 程 《 DE 〔 磊 〕 ． v 1.1 起 始 页 ListBox.xml 0 u 《 元 素 布 局 框 架 回 基 酬 元 素 按 钮 們 布 局 元 素 0 适 葒 入 性 名 称 〔 中 交 文 ． 名 称 elementlJI 0 用 户 中 心 用 户 中 心 会 员 权 益 名 称 〔 nam 到 布 局 用 户 中 心 @ 定 位 功 能 名 称 射 汞 应 用 中 心 逶 明 度 T 讞 # 里 干 打 包 打 包 砹 功 nul [ 22 ] 火 山 零 基 诎 彩 课 程 些 课 p zip 压 包 文 名 nul [ 0 ] nul [ 0 ] 乙 p压翁包@码： nul [ 0 ] nul [ 0 ] C ： \Users\mx\Desktop\%IDE-3.1.1 一 〔 2021 一 10 一 2 川 Pr 可 (v) 还 」 零 基 诎 彩 课 1 1 nul [ 0 ] 确 定 2ntlJl [ 0 ] ±ntLJl [ 0 ] 0 退 出 2ntL]I [ 101 ]](https://www.lkuaiy.com/image/editor/1644924450507760.png)
在火山里面，新建一个列表框的变量
然后，通过对象的名称获取组件的句柄
下面我们再创建一个 列表数据的变量，类型为 数据适配器_表格
我们在获取到列表框的句柄后，使用列表框创建一个数据适配器，句柄给我们建立的数据适配器句柄
说一下数据适配器的作用，数据适配器相当于一个仓库，列表框相比于前台。您在前台可以看到一部分商品，但是这不是完整的数据，完整的数据放在仓库里面，需要什么数据可以直接从仓库里面获取
数据适配器相当于一个保管数据的功能
下面我们来给列表框设置模板文件，这里我们可以看到有三种方法来设置。
第一种方式，直接使用置项模板（），参数为一个hTmp，变整数变量，我们下面使用这种方法来创建模板，这里先不讲
第二种方式，使用从文件的方法，参数为路径名
第三种，使用从字符串的方法，这里字符串是字节集，所以需要使用一个文本到字节集传递过去
至于字符串在哪里看，使用记事本方式打开我们的模板XML，全部复制就可以了
我们来使用第一种方式加载模板，创建一个hTmp变量，使用函数，项模板_加载从内存ZIP（）
看一下第一个参数，类型选择列表框，第二个参数，视窗文件资源，第三个参数是模板的名字。
加载成功会返回模板的句柄，然后句柄给列表框就可以了
如下图所示
下面使用添加列的功能，这个功能是告诉数据适配器，我们这个列表框里面有多少个字段名。
我们的模板里面有三个组件，绑定了name1、name2、name3三个名字，所以这里需要添加三次。
做到这里，我们已经做的很好了，下面来给列表框添加几个行来看看吧
如果您要添加一个新的行，或者是新起一行，使用添加项文本或者是添加项图片可以，这里由于我们没有在模板里面放置图片框的组件，所以，我们只可以使用
添加项文本的功能
添加项文本可以有两种方式，一种是普通的，另一种是扩展，学就学高级的，我们使用扩展
第一个参数是pName，这里，我们要先给第一行第一个文本组件添加文本，所以，要输入name1，标题为第一行
写到这里，列表框里面已经添加一行了，下面来调试运行火山项目
这里忘记讲了，敲重点，我们让按钮占所有空间，所以，大UI必须要高度宽度填充父，这里我没办法详细解释，如果不设置的话，会出现子计算父，父计算子的现象，最终会出现锁死的现象
列表框效果，一行，一个文本，一个按钮，那么我们的另外一个文本组件跑哪里去了
答案是另外一个文本组件没有设置文本，所以模板给它分配的宽度为0，我们的按钮由于占用所有剩余的特性，就把空间全部给占用了
下面，我们给另外两个组件也命名，添加项文本扩展是新起一行时候使用，会返回当前项ID
我们在已有项的基础上给同一行新的组件的设置文本，要使用置项文本扩展，第一个参数是项ID，如下图所示
调试运行一下
此时由于第二个文本组件有了文本，所以按钮不能再抢他的空间
下面批量设置50行数据
运行，此时在列表框内显示了16行数据，那么我们只有16行数据吗，并不是，其余数据放在什么地方，放在数据适配器里面，也就是放在了仓库里面
正因为炫彩这种特性，所以炫彩的列表框在加入大量数据的时候，会运行的非常快，收到新数据，会放在仓库里面，而不是马上显示出来
三、本文到这里结束
2. 本站资源,除文章特别指明外,均限定付费者本人使用,禁止二次 转载 传播 分发!
3. 本站资源多为第三方用户投稿 定价由资源提供者设定 收益人为资源提供者大家下载资源前仔细甄别需求与其描述是否可达预期 除非较明显的与说明不符资源外的纠纷尽量与作者点对点直接解决
4. 资源提供者发布作品请提供作品详细说明 与 截图 源码作品若引用了 其它模块或依赖请诚实说明 明细与版本！以及依赖是否开源。尽量做到资源下载后 可以直接使用与运行
5. 本站资源会员享受折扣开一个吧只有这个才是站长能拿到手的
炫彩资源网 » 火山PC从零开始学炫彩UI 第十一课
