作者:aamjlft | 来源:互联网 | 2023-10-10 10:22
前言:
所有图层为PNG,方便二次修改
一、配置模块
右键配置,勾选“火山模块”
![在这里插入图片描述](https://img.php1.cn/3cd4a/189d8/978/7dbdf0f38ad53545.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
二、布局器设计
①控制区布局
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/5287a7b3296ea13e.webp)
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/eec57030b649a106.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
②选择区布局
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/b428d8f746fb8d47.webp)
![在这里插入图片描述](https://img.php1.cn/3cd4a/189d8/978/7dbdf0f38ad53545.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
③功能区布局
![在这里插入图片描述](https://img.php1.cn/3cd4a/189d8/b64/5b34b53b79a39fdd.jpeg)
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/67cc2e96eddffff8.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
④结算布局
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/011ac27956d007f0.webp)
![在这里插入图片描述](https://img.php1.cn/3cd4a/189d8/978/7dbdf0f38ad53545.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
⑤房间布局
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/011ac27956d007f0.webp)
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/6c257b6ba227cc3e.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/ff61bfdd3c0af92e.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
三、主窗口布局
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/7494af3c1cda418d.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
将各布局器加入主窗口,并调整至合适位置
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/ff61bfdd3c0af92e.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
四、初始化界面
主窗口可视设置为假,然后创建完毕后用时钟去显示
主要是加载窗口时有一瞬间的空白期,感觉不好,所以用了延迟显示
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/d05d9dfd09a56332.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img.php1.cn/3cd4a/1e618/bdf/129913486c37ddf6.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/7494af3c1cda418d.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTE4NTkwNzY1MA==,size_16,color_FFFFFF,t_70)
五、演示
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/5b97d3b808d031e2.webp#pic_center)
例子下载:点击本链接