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

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

作者：灰羊羊
一、本文学习内容
    
    本文我们来学习炫彩容器的使用，以及制作一个多选按钮。
    
二、界面设计UI流程
我们打开上节课的设计器项目
首先我们可以看到左侧文档大纲，这里可以是一个窗口组件的视图。这里用英文来表示的。没有关系。我们用到英文的地方并不多，就那么有限的几个，而且只是让您看，而不让您拼写，但是所以说您不必因为是英文的，感到难学习。

这里我现在鼠标点击WindowsUI。可以看到右边窗口被整体选中。说明我们最上面这个WindowsUI代表的就是我们的窗口。
而下边buttonUI，他表示的是按钮。我们放置了五个按钮，所以说在左边会显示五个按钮。
其中一个按钮，它后面一个中括号写着一个22。这里这个22是因为我们在前面做课程的时候。我们把一个按钮的ID设置为22。您可以看下面这张图。设置的ID会在这里显示出来，没有设置的就会显示零。

下面我们开始我们在右边的组件框里面找到基础元素，然后把它放在窗口上面。基础元素就是一个空白的组件里面什么功能也没有。
所以我们可以用这个基础元素做好多东西。比如说您可以在上面画一些东西，或者是用它装一些组件。
放置好之后，我们在左边的文档大纲里面可以看到我们在最后面放着的基础元素。

下面我们先在导航中选中左边的基础元素。
在右边的工具箱里面找一个按钮，然后再基础元素放下按钮。这样子，您观察我们生成的按钮，它生成的位置在基础元素的下一层，就相当于我们原来放置的基础元素是他的父组件。
同样的道理，我们看我们的每一个组件，除了刚才最新放的按钮。他们的父组件都是窗口。而我们刚才放置的按钮，它的父组件是我们的基础元素。
炫彩扩展性非常强，炫彩上面每一个组件都可以容器来使用。每一个组件里面都可以放其他的组件。

我们移动按钮，会发现他如果移动出这个基础元素的显示区域，就会被遮挡一部分。这和窗口显示组件是一样的道理
这个时候您观察按钮的坐标，它的左边为97。上面为16，这个坐标是相对于基础元素来说的。对于按钮来说，它的坐标零点是基础元素左上角的点。

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

这样子，您应该对炫彩的导航这个层次性有一个简单的了解了。
下面我们来看一下按钮，按钮有好几种形态，单选，多选以及最常见的默认形态。这里我们来玩一下多选按钮。炫彩的功能挺多的，我们就讲解最重要的。按钮的多选挺重要的。
把上面创建的按钮从基础元素中给他拖拽出来，我们把它放在最外面一层。

选中按钮，在右边的按钮类型和样式中都改为多选按钮，按钮样式就是按钮的样子。如果一个普通的按钮，被设置成多选按钮的样子。但是他没有多选按钮的功能。
按钮的类型，是按钮的功能，一个按钮设置成多选按钮，那么它就会有多选按钮的功能。可以拥有选中以及非选中状态

下面我们来看两个gif，首先演示一下，一个普通的按钮，给他一个多选的样子会怎么着？

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

下面让我们用多选的样子，多选的功能来看一下这个按钮是什么样子的。

现在我们用背景管理器，我们自己来画这个背景。老规矩，右键点击组件，然后选择背景编辑器。

进来之后，我们添加未选中以及选中两个状态。

我们在未选中状态之下添加一个巨小。然后把它设置为圆角，这个圆角您根据您放置按钮的大小来做。没有准确的规格，看着舒服就可以了。

下面我们按照步骤来添加颜色。添加颜色的方法以前已经说过。

这里我们要记得勾选平滑，平滑之后会减少锯齿。

这里我们放置一个圆，用到了我们的第五个图标。

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

我在这里将这个圆的宽度和高度设置为26，然后调整位置，把它放在这个圆角矩形的右边。

同样的方法再做一个。放在选中状态上，如下图这样子，您就做好了一个简单的开关。修改之后点击修改，然后保存，关闭这个编辑界面。

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

下面我们保存我们的项目，然后打包使用火山来加载它。是不是去减少了锯齿，同时我们发现了白边，还记得以前的解决方法吗？我们要给组件设置背景透明。

最终按钮效果图

三、本文就先到这里

源代码下载