火山PC从零开始学炫彩UI  第八课

火山PC从零开始学炫彩UI  第八课

作者:灰羊羊
一、本文学习内容
    
    本文我们来学习炫彩容器的使用,以及制作一个多选按钮。
    
二、界面设计UI流程
我们打开上节课的设计器项目
首先我们可以看到左侧文档大纲,这里可以是一个窗口组件的视图。这里用英文来表示的。没有关系。我们用到英文的地方并不多,就那么有限的几个,而且只是让您看,而不让您拼写,但是所以说您不必因为是英文的,感到难学习。
G) 底 ( 文 视 到 调 试 工 具 帮 炫 岿 言 . 中 交 隔 程 《 DE 〔 磊 〕 . v 1.1 项 目 视 到 起 台 页 火 山 零 基 诎 彩 程 课 0 茹 0 炫 彩 素 材 一 已 远 块 用 F 中 心 0 会 员 权 益 @ 定 位 功 能 TextB10ck 应 用 中 心 iTextB 《 Ock :TextBlock •„@windowlJI [ 0 ] 一 . buttonlJl [ 22 ] 一 . bu 。 n [ 0 ] Text810ck 一 . buttonlJl [ 0 ] 一 . bu 。 n [ 0 ] 一 . bu 。 n [ 0 ] „@editlJl [ 0 ] „@shapePicture[O] „@shapeText[O] „@shapeText[O] 0 退 出 „@shapeText[O] 一 . sha 些 Te 对 [ 0 ]
这里我现在鼠标点击WindowsUI。可以看到右边窗口被整体选中。说明我们最上面这个WindowsUI代表的就是我们的窗口。
而下边buttonUI,他表示的是按钮。我们放置了五个按钮,所以说在左边会显示五个按钮。
其中一个按钮,它后面一个中括号写着一个22。这里这个22是因为我们在前面做课程的时候。我们把一个按钮的ID设置为22。您可以看下面这张图。设置的ID会在这里显示出来,没有设置的就会显示零。
00 - 8 ← X21 ( も 口 Igaxal 〕 P 。 -8 ャ xa ト 3 住 僵 ◎ 田 山 一 52 を 2 」 n052 」 ( 9 覊 2 ー 巨 Inmopu!M ? ー A 覊 一 朝 呱 当

mainxml resou rce.res style.css windowUI [O] —Q» buttonUI [22] —C' buttonUI [O] buttonUI [O] buttonUI [O] buttonUI [O] editUl [0] shapePicture [O] — • shapeText [O] — • shapeText [O] — • shapeText [O] [E] x TextB1 ock I ock TextBlock TextBlock me) ta buttonUI normal - - normal - - normal - - normal - normal - - normal - - normal - - normal - - normal - - normal - normal -

下面我们开始我们在右边的组件框里面找到基础元素,然后把它放在窗口上面。基础元素就是一个空白的组件里面什么功能也没有。
所以我们可以用这个基础元素做好多东西。比如说您可以在上面画一些东西,或者是用它装一些组件。
放置好之后,我们在左边的文档大纲里面可以看到我们在最后面放着的基础元素。
0 炫 彩 素 材 u 《 元 素 基 酬 元 素 們 布 元 素 下 拉 组 台 框 巳 列 汞 框 日 滚 动 条 莱 望 景 - 工 具 条 一 已 远 块 文 本 接 月 历 卡 片 囤 日 期 时 河 0 用 户 中 心 0 形 扰 对 象 园 形 文 本 形 状 片 形 状 引 F 会 员 权 益 [ 当 形 状 组 框 詡 形 状 汞 相 @ 定 位 功 能 巨 定 对 象 TextB10ck 望 远 按 钮 多 远 按 钮 应 用 中 心 iTextB 《 Ock 适 葒 入 性 名 称 〔 中 交 文 . :TextBlock •„@windowlJI [ 0 ] 一 . buttonLJl [ 22 ] 一 . bu 。 n [ 0 ] Text810ck 一 . bu on [ 0 ] 一 . bu 。 n [ 0 ] 一 . bu on [ 0 ] „@editlJl [ 0 ] „@shapePicture[O] 一 . sha 些 Te 对 [ 0 ] „@shapeText[O] 0 退 出 „@shapeText[O] 一 . sha 些 Te 对 [ 0 ]
下面我们先在导航中选中左边的基础元素。
在右边的工具箱里面找一个按钮,然后再基础元素放下按钮。这样子,您观察我们生成的按钮,它生成的位置在基础元素的下一层,就相当于我们原来放置的基础元素是他的父组件。
同样的道理,我们看我们的每一个组件,除了刚才最新放的按钮。他们的父组件都是窗口。而我们刚才放置的按钮,它的父组件是我们的基础元素。
炫彩扩展性非常强,炫彩上面每一个组件都可以容器来使用。每一个组件里面都可以放其他的组件。
项 目 视 到 起 始 页 火 山 零 基 诎 彩 程 课 亻 然 0 曰 0 炫 彩 素 材 u 《 元 素 基 诎 元 素 按 钮 們 布 元 素 下 拉 组 台 框 巳 列 汞 框 列 见 到 日 滚 动 条 莱 望 景 - 工 具 景 0 进 过 条 一 已 远 块 文 本 接 月 历 卡 片 囤 日 期 时 河 0 用 户 中 心 0 形 扰 对 象 园 形 文 本 形 状 片 形 状 引 F 形 状 矩 形 回 形 状 过 形 会 员 权 益 [ 当 形 状 坦 框 詡 形 状 汞 相 @ 定 位 功 能 巨 定 对 象 TextB10ck 望 远 按 钮 多 远 按 钮 应 用 中 心 8 凵 on iTextB 《 Ock L 适 葒 入 性 名 称 〔 中 交 文 . :TextBlock 名 称 elementlJI •-@windowLJI [ 0 ] 一 . buttonlJl [ 22 ] 一 . bu 。 n [ 0 ] Text810ck 一 . buttonlJl [ 0 ] 名 称 〔 nam 到 一 . buttonLJl [ 0 ] 名 称 射 汞 一 . bu 。 n [ 0 ] „@editlJl [ 0 ] „@shapePicture[O] 逶 明 度 一 . 5 peTe 对 [ 0 ] „@shapeText[O] 0 退 出 工 具 示 „@shapeText[O] „@shapeText[O] 一 . elementlJl [ 0 ] ; 藶 边 ()e 一 . buttonlJl [ 0 ] 45g 上 边 〔 t 。 司 179 寬 过 〔 w 记 th ) 高 度 山 eig 卜 t 〕 1 12 布 局 . 项 布 局 寬 过 布 局 高 度

我们移动按钮,会发现他如果移动出这个基础元素的显示区域,就会被遮挡一部分。这和窗口显示组件是一样的道理
这个时候您观察按钮的坐标,它的左边为97。上面为16,这个坐标是相对于基础元素来说的。对于按钮来说,它的坐标零点是基础元素左上角的点。
名 称 〔 nam 到 名 称 射 汞 逶 明 度 工 具 示 纟 郭 定 组 旧 绑 过 元 素 藶 边 ()e 上 边 〔 t 。 司 寬 过 〔 w 记 th ) E*(height) 内 容 偏 恽 区 y ) Button

下面如果您想把一个组件设置为另一个组件的子组件,但是不小心创建的时候把它放错位置了,那么该如何移动它呢?您可以删掉重新放,或者是剪切,再复制。
很遗憾,炫彩的设计器对于剪切有限制。这里我们可以直接拖动组件调整位置
我们选中一个组件在拖动的过程中,如果它显示的是一条横线,说明你可以把组件放到这两个组件中间,如果显示的是一个矩形框。那么表示的意思是您可以把这个组件放到这个组件的里面,相当于变成它的子组件。

这样子,您应该对炫彩的导航这个层次性有一个简单的了解了。
下面我们来看一下按钮,按钮有好几种形态,单选,多选以及最常见的默认形态。这里我们来玩一下多选按钮。炫彩的功能挺多的,我们就讲解最重要的。按钮的多选挺重要的。
把上面创建的按钮从基础元素中给他拖拽出来,我们把它放在最外面一层。
00 - 8 ← X21 ( 〕 P 。 -8 ャ xa ト 田 山 巨 う u 。 コ 9 ? ー 巨 InmopulM@-A 一 を 面 を

选中按钮,在右边的按钮类型和样式中都改为多选按钮,按钮样式就是按钮的样子。如果一个普通的按钮,被设置成多选按钮的样子。但是他没有多选按钮的功能。
按钮的类型,是按钮的功能,一个按钮设置成多选按钮,那么它就会有多选按钮的功能。可以拥有选中以及非选中状态
EID - normal - Butt m - normal - - normal - normal-
下面我们来看两个gif,首先演示一下,一个普通的按钮,给他一个多选的样子会怎么着?

我们这一个普通的按钮虽然变成了多选的样子。但是没有多选的功能,我们点击它。也不会被选中。
下面我们来试一下一个按钮有多选的功能,但是它的样子是默认的。这样子会怎么着?

下面让我们用多选的样子,多选的功能来看一下这个按钮是什么样子的。
名 称 〔 nam 到 名 称 射 汞 逶 明 度 工 具 示 组 旧 B u 能 0 n 绑 过 元 素 多 远
现在我们用背景管理器,我们自己来画这个背景。老规矩,右键点击组件,然后选择背景编辑器。
步 层 性 添 加 为 巨 定 必 的 象 跳 转 } 代 码 〔 生 成 代 码 ) 绑 定 E 〔 修 改 喽 E ) 绑 定 成

进来之后,我们添加未选中以及选中两个状态。
分 旎 列 汞 的 象 列 汞 亘 制 状 态 : 无 E*$ä#(buttonlJl) 添 加 状 态 绢 合 状 态 ) 一 (buttonUl) @无 @无 @无 @无 O 无 @无 @无 O 禁 用 O 无 焦 中 O 无 .**Ex 0 @耒远中 O 到 二 . 还 原 O 布 局 内 容 区 O 启 用 O 焦 中 O 停 O 远 中 O 到 二 . 昷 大 化 · 25 5 O 按 下 不 逶 明 度 . 的 象 性 水 平 中 1 垂 直 苦 中 颜 色 设 岩 R = 255 。 G = 08 = 0 适 0 大 小 确 定 ü:Ctrl+ S,iä±: Esc
我们在未选中状态之下添加一个巨小。然后把它设置为圆角,这个圆角您根据您放置按钮的大小来做。没有准确的规格,看着舒服就可以了。
E*$ä#(buttonlJl) 分 旎 列 汞 0 远 中 圄 远 中 、 0 . T 1 草 扌 以 宽 过 . 1 草 扌 以 高 度 : 25 颜 色 设 岩 的 象 列 汞 不 逶 明 度 . · 25 5 R=O,G=0 8 = 255 的 象 性 国 大 小 : 状 态 . 过 交 本 颜 色 亘 制 状 态 : 无 ü:Ctrl+ S,iä±: Esc
下面我们按照步骤来添加颜色。添加颜色的方法以前已经说过。
o x 83 26 resou rce. res ID COLOR 1 ID COLOR 2 ID COLOR 3 ID COLOR 4 ARGB = ARGB = ARGB = ARGB = COLOR 4 x trl + S, Esc
这里我们要记得勾选平滑,平滑之后会减少锯齿。
E*%(buttonUl)* 分 旎 列 汞 0 远 中 圄 远 中 T 1 草 扌 以 宽 过 . 1 草 扌 以 高 度 : 25 颜 色 设 岩 0 的 象 列 汞 0 资 源 : @IDCOLOR4 平 滑 的 象 性 国 大 小 : 状 态 . 过 交 本 颜 色 亘 制 状 态 : 无 ü:Ctrl+ S,iä±: Esc
这里我们放置一个圆,用到了我们的第五个图标。
E*%(buttonUl)* 分 旎 列 汞 远 中 远 中 、 0 . T 椏 拟 宽 过 : 55 椏 拟 高 度 : 25 颜 色 设 岩 的 象 列 汞 不 逶 明 度 : 255 R=O,G=0 8 = 255 的 象 性 寬 过 : 1 閬 高 度 : 1 閬 状 态 . 过 交 本 颜 色 亘 制 状 态 : 无 ü:Ctrl+ S,iä±: Esc

这里有个关于小边框的知识点,您看一下。
如果一个边框它处于活动的状态,那么您可以在右边修改数值。如这里我们的左边显示为6,它是活动的状态。所以我们可以在右边修改他的数值。
我们的顶边是-25,他同样现在也是活动的状态。那么您可以修改它。
下面一点比较绕,如果x方向的两个边,它都是处于锁死的状态。那么就不能修改宽度。如果x方向的两个边都是活动的状态。那么也不能修改宽度。高度方面同理
总之看这里比较绕,您可以直接上手试一下,相信会很快就出结果。

E*%(buttonUl)* 分 旎 列 汞 0 远 中 圄 远 中 T 1 草 扌 以 宽 过 . 1 草 扌 以 高 度 : 25 颜 色 设 岩 0 的 象 列 汞 不 逶 明 度 . · 25 5 R=O,G=0 8 = 255 的 象 性 宽 度 : 1 閬 《 二 I 高 度 : 100 锁 死 在 边 框 活 动 的 目 下 , 可 以 修 改 数 值 状 态 . 过 交 本 颜 色 亘 制 状 态 : 无 ü:Ctrl+ S,iä±: Esc

我在这里将这个圆的宽度和高度设置为26,然后调整位置,把它放在这个圆角矩形的右边。
E*$ä#(buttonlJl) 分 旎 列 汞 远 中 远 中 、 0 . T 椏 拟 宽 过 : 55 椏 拟 高 度 : 25 颜 色 设 岩 的 象 列 汞 资 源 : @IDCOLOR6 平 滑 的 象 性 寬 过 : 25 高 度 : 25 状 态 . 过 交 本 颜 色 亘 制 状 态 : 无 ü:Ctrl+ S,iä±: Esc

同样的方法再做一个。放在选中状态上,如下图这样子,您就做好了一个简单的开关。修改之后点击修改,然后保存,关闭这个编辑界面。
E*$ä#(buttonlJl) 信 x x 糢 寬 室 : 55 糢 高 度 : 25 色 澱 匿 対 ま 列 表 対 象 性 状 悉 - 螂 定 文 本 色 制 状 悉 : 无 ü:Ctrl + 退 辷 : Esc

在设计器里面预览一下,发现这个有好多的锯齿,不够平滑,这些都是正常现象。我们放在火山里面加载之后就不会这样子了。


下面我们保存我们的项目,然后打包使用火山来加载它。是不是去减少了锯齿,同时我们发现了白边,还记得以前的解决方法吗?我们要给组件设置背景透明。
集 艹 一 创 置 加 句 用 会 定 0 用 F 中 心 会 员 权 益 @ 定 位 功 能 TextB10ck 载 柄 户 员 位 应 用 中 心 TextB 》 Ock TextBlock TextBlock . 尸 员 位 出 用 会 定 退 0 退 出
- normal - normal - normal • normal- - e,

最终按钮效果图

 

三、本文就先到这里

源代码下载

1. 本站鼓励用户发布原创内容,但并不保证每个人都遵守这一点,若内容侵犯了你的权益可联系管理员删除!
2. 本站资源,除文章特别指明外,均限定付费者本人使用,禁止二次 转载 传播 分发!
3. 本站资源多为第三方用户投稿 定价由资源提供者设定 收益人为资源提供者大家下载资源前仔细甄别需求与其描述是否可达预期 除非较明显的与说明不符资源外的纠纷尽量与作者点对点直接解决
4. 资源提供者发布作品请提供作品详细说明 与 截图 源码作品若引用了 其它模块或依赖请诚实说明 明细与版本!以及依赖是否开源。尽量做到资源下载后 可以直接使用与运行
5. 本站资源会员享受折扣开一个吧只有这个才是站长能拿到手的

炫彩资源网 » 火山PC从零开始学炫彩UI  第八课

1 评论

  1. 源码呢

发表评论