<Rust>egui学习之小部件(三):如何为窗口UI元件设置布局(间隔、水平、垂直排列)?

前言

本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析,主要讲解egui的源代码、部件属性、如何应用。

环境配置

系统:windows

平台:visual studio code

语言:rust

库:egui、eframe

概述

本文是本专栏的第三篇博文,主要说明如何对窗口的部件进行布局。

事实上,类似于iced,egui都提供了示例程序,本专栏的博文都是建立在官方示例程序以及源代码的基础上,进行的实例讲解。
即,本专栏的文章并非只是简单的翻译egui的官方示例与文档,而是针对于官方代码进行的实际使用,会在官方的代码上进行修改,包括解决一些问题。

系列博文链接:

1、<Rust>egui学习之小部件(一):如何在窗口及部件显示中文字符?

2、<Rust>egui学习之小部件(二):如何在egui窗口中添加按钮button以及标签label部件?

部件属性
设置间隔

我们已经知道了如何在窗口布置按钮、标签,但是我们想要按钮和标签在窗口的呈现是有设计的,比如它们之间有间隔,且可以水平或者垂直布局,如何实现呢?

egui提供了sapcing以及horizontal、vertical三种属性,我们一一来看一下。

首先我们添加几个按钮以及标签,但是没有任何布局,看一下窗口显示:

可以看到,默认情况的布局,这些部件都是垂直分布且挤在一起的。

现在,我们先让这些部件之间有一些间隙,使其看起来不那么局促:

rust 复制代码
ui.spacing_mut().item_spacing = egui::vec2(10.0, 30.0);

是不是一下子就清爽了不少,接着,我们为按钮设置布局,我们将按钮2和按钮3放在同一行:

rust 复制代码
ui.horizontal(|ui|{
                let btn_res2=ui.button("按钮2");
                if btn_res2.clicked(){ 
                    //println!("按钮2点击")
                    self.lbltext="按钮2点击".to_string();
                }
                let btn_res3=ui.button("按钮3");
                if btn_res3.clicked(){ 
                    //println!("按钮3点击")
                    self.lbltext="按钮3点击".to_string();
                }
            });

接下来,我们将文本1、文本2与上面的文本放到同一行,且文本1、文本2本身垂直分布:

rust 复制代码
ui.horizontal(|ui|{
                ui.label(format!("{}",self.lbltext));
                ui.vertical(|ui|{
                    ui.label("文本1");
                    ui.label("文本2");
                });
            
            });

我们可以看到,里面的布局是可以嵌套的。

那么,如果想要让horizontal或者vertical内部的部件之间的间隙改变的话,如何设置呢?

其实是一样,只要在其内部,添加spacing_mut即可:

rust 复制代码
  ui.horizontal(|ui|{
                ui.spacing_mut().item_spacing = egui::vec2(30.0, 60.0);
                ui.label(format!("{}",self.lbltext));
                ui.vertical(|ui|{
                    ui.label("文本1");
                    ui.label("文本2");
                });
            
            });

看一下实际显示:

当然,如果你说,我现在不想整体设置间隙,只是想在某个布局内部,设置某两个部件间的单独的间隙,如何设置呢?

可以使用add_space参数:

rust 复制代码
 ui.vertical(|ui|{
                    ui.label("文本1");
                    ui.add_space(30.0);
                    ui.label("文本2");
                });

如上面的代码,将在这个垂直布局的两个文本之间,单独添加一个空间,值为30。

所以,我们可以结合spacing、horizontal以及vertical这三个属性,来调整布局,达到想要的效果。然后使用add_space这种来微调,当然,这种调整UI布局的方式,在涉及大量部件的时候,其实是不太方便的。

相关推荐
时光追逐者28 分钟前
MongoDB从入门到实战之MongoDB快速入门(附带学习路线图)
数据库·学习·mongodb
一弓虽33 分钟前
SpringBoot 学习
java·spring boot·后端·学习
genggeng不会代码2 小时前
用于协同显著目标检测的小组协作学习 2021 GCoNet(总结)
学习
搞机小能手3 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类
Source.Liu5 小时前
【mdlib】0 全面介绍 mdlib - Rust 实现的 Markdown 工具集
rust·markdown
The_cute_cat5 小时前
25.4.22学习总结
学习
冰茶_5 小时前
.NET MAUI 发展历程:从 Xamarin 到现代跨平台应用开发框架
学习·microsoft·微软·c#·.net·xamarin
cooldream20096 小时前
深入理解MVP架构:让UI层与业务逻辑完美分离的设计模式
ui·设计模式·架构·系统架构师
帅云毅6 小时前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链
豆豆6 小时前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉