当前位置: 首页 > news >正文

【rust/egui】(八)使用panels给你的应用划分功能区块

说在前面

  • rust新手,egui没啥找到啥教程,这里自己记录下学习过程
  • 环境:windows11 22H2
  • rust版本:rustc 1.71.1
  • egui版本:0.22.0
  • eframe版本:0.22.0
  • 上一篇:这里

panel是啥

  • panel是ui上的一块区域,比如我们打开CSDN的markdown编辑器,它大致上可以划分成四(五)块 (当然实际实现上这四块区域可能不是并列的) ,那我们就可以用四个panel来实现它:

    • 最顶层的文章标题
    • 次顶层的菜单栏
    • 左侧的编辑区域
    • 右侧的预览区域
      在这里插入图片描述
  • panel有点类似于html中的div元素,但是功能上没有div那么强 (初步感觉哈)

使用方式

  • 在前面几节中,我们已经初步了解了panel的基本使用,这里我们来看一个综合的使用用例

  • 假设我们要实现vscode的布局,应该怎样去实现呢?先来看下vscode的功能区,当然还有一个在最上面的菜单栏
    在这里插入图片描述

  • 现在我们来尝试实现一下 (可以直接在前面几节的template上进行)

    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {egui::TopBottomPanel::top("Menu Bar").show(ctx, |ui| {ui.vertical_centered(|ui|{ui.heading("Menu Bar");});});egui::TopBottomPanel::bottom("Status Bar").show(ctx, |ui| {ui.vertical_centered(|ui|{ui.heading("Status Bar");});});egui::SidePanel::left("Activity Bar").show(ctx, |ui| {ui.horizontal_centered(|ui|{ui.label("Activity Bar");});});egui::SidePanel::left("Side Bar").show(ctx, |ui| {ui.horizontal_centered(|ui|{ui.label("Side Bar");});});egui::TopBottomPanel::bottom("Panel").show(ctx, |ui| {ui.vertical_centered(|ui|{ui.heading("Panel");});});egui::CentralPanel::default().show(ctx, |ui|{ui.vertical_centered(|ui|{ui.heading("Editor");});});
    }
    

    结果为:
    在这里插入图片描述

  • 大致的区域划分是差不多的,但是各个区域的大小不太对,我们可以稍微调整下

    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {egui::TopBottomPanel::top("Menu Bar").show(ctx, |ui| {ui.vertical_centered(|ui| {ui.heading("Menu Bar");});});egui::TopBottomPanel::bottom("Status Bar").show(ctx, |ui| {ui.vertical_centered(|ui| {ui.heading("Status Bar");});});egui::SidePanel::left("Activity Bar").max_width(40.0).resizable(false).show(ctx, |ui| ui.add(egui::Label::new("Activity Bar")));egui::SidePanel::left("Side Bar").default_width(1000.0).width_range(200.0..=2000.0).resizable(true).show(ctx, |ui| {ui.text_edit_singleline(&mut "hi");});egui::TopBottomPanel::bottom("Panel").default_height(200.0).resizable(false).show(ctx, |ui| {ui.add(egui::TextEdit::multiline(&mut "Panel").desired_rows(10));});egui::CentralPanel::default().show(ctx, |ui| {ui.heading("Editor");});
    }
    

    其结果为:
    在这里插入图片描述

    代码上,除了定义panel的宽高外,还添加了一些text_edit;这是因为panel的实际宽高是和其内部的元素相关的
    比如一个SidePanel,如果其内部仅有一个label,即使你设置了resizable属性,它的宽度也没法动态变化

    pub fn resizable(self, resizable: bool) -> Self

    • Can panel be resized by dragging the edge of it?
    • Default is true.
    • If you want your panel to be resizable you also need a widget in it that takes up more space as you resize it

window decorations

  • 对比vscode我们可以看到还有一点小不同:
    在这里插入图片描述

  • vscode中的图标、菜单栏都是在一块的,而我们的demo app则是分成了两块

  • 如果我们想要和vscode一致应该怎样实现呢?

  • 首先将eframe的decorations去掉

    let mut native_options = eframe::NativeOptions::default();
    native_options.decorated = false;let ret = eframe::run_native("demo app",native_options,Box::new(|cc| Box::new(demo_app::TemplateApp::new(cc))),
    );
    
  • 然后需要自己实现整个frame,具体可以参考这里,相对比较麻烦,其效果如图:
    在这里插入图片描述

  • 感觉效果不太行,这里就不展开了

panel内部的区域划分

  • 在使用panel时,可能会遇到panel内部需要继续划分的情况,这个时候应该怎样处理呢?
    egui::SidePanel::left("Side Bar").default_width(1000.0).width_range(200.0..=2000.0).resizable(true).show(ctx, |ui| {egui::TopBottomPanel::bottom("AB bottom").show_inside(ui, |ui| {ui.label("bottom");});ui.text_edit_singleline(&mut "Side Bar");});
    
    使用show_inside方法即可
    在这里插入图片描述

参考

  • panel

相关文章:

【rust/egui】(八)使用panels给你的应用划分功能区块

说在前面 rust新手,egui没啥找到啥教程,这里自己记录下学习过程环境:windows11 22H2rust版本:rustc 1.71.1egui版本:0.22.0eframe版本:0.22.0上一篇:这里 panel是啥 panel是ui上的一块区域&…...

QT实现任意阶贝塞尔曲线绘制

bezier曲线在编程中的难点在于求取曲线的系数,如果系数确定了那么就可以用微小的直线段画出曲线。bezier曲线的系数也就是bernstein系数,此系数的性质可以自行百度,我们在这里是利用bernstein系数的递推性质求取: 简单举例 两个…...

【Java 基础篇】Java 数组使用详解:从零基础到数组专家

如果你正在学习编程,那么数组是一个不可或缺的重要概念。数组是一种数据结构,用于存储一组相同类型的数据。在 Java 编程中,数组扮演着非常重要的角色,可以帮助你组织、访问和操作数据。在本篇博客中,我们将从零基础开…...

基于Citespace、vosviewer、R语言的文献计量学可视化分析技术及全流程文献可视化SCI论文高效写作

文献计量学是指用数学和统计学的方法,定量地分析一切知识载体的交叉科学。它是集数学、统计学、文献学为一体,注重量化的综合性知识体系。特别是,信息可视化技术手段和方法的运用,可直观的展示主题的研究发展历程、研究现状、研究…...

docker_python-django_uwsgi_nginx_浏览器_网络访问映过程

介绍 1:介绍docker中使用uwsgi服务器启动django 设置了uwsgi的脚本 2:介绍启动uwsgi后,使用本地浏览器去访问这个容器中的端口 3:分别使用了3个ip地址去访问这个服务 1:使用本地连接*2 2:使用windows系统里…...

Python爬取天气数据并进行分析与预测

随着全球气候的不断变化,对于天气数据的获取、分析和预测显得越来越重要。本文将介绍如何使用Python编写一个简单而强大的天气数据爬虫,并结合相关库实现对历史和当前天气数据进行分析以及未来趋势预测。 1 、数据源选择 选择可靠丰富的公开API或网站作…...

基础算法-递推算法-学习

现象: 基础算法-递推算法-学习 方法: 这就是一种递推的算法思想。递推思想的核心就是从已知条件出发,逐步推算出问题的解 最常见案例: 一:正向递推案例: 弹力球回弹问题: * 弹力球从100米高…...

L1-056 猜数字(Python实现) 测试点全过

前言: {\color{Blue}前言:} 前言: 本系列题使用的是,“PTA中的团体程序设计天梯赛——练习集”的题库,难度有L1、L2、L3三个等级,分别对应团体程序设计天梯赛的三个难度。更新取决于题目的难度,…...

第 361 场 LeetCode 周赛题解

A 统计对称整数的数目 枚举 x x x class Solution { public:int countSymmetricIntegers(int low, int high) {int res 0;for (int i low; i < high; i) {string s to_string(i);if (s.size() & 1)continue;int s1 0, s2 0;for (int k 0; k < s.size(); k)if …...

07-架构2023版-centos+docker部署Canal 实现多端数据同步

canal 工作原理 canal 模拟 MySQL slave 的交互协议,伪装自己为 MySQL slave ,向 MySQL master 发送dump 协议MySQL master 收到 dump 请求,开始推送 binary log 给 slave (即 canal )canal 解析 binary log 对象(原始为 byte 流)基于日志增量订阅和消费的业务包括 数据库镜…...

过滤器的应用-Filter

过滤器 1.工作原理 2.创建Filter 2.1通过注解的方式实现 //创建一个类&#xff0c;实现Filter接口 WebFilter(urlPatterns "/myfilter") //urlPatterns表示需要拦截的路径 public class MyFilter implements Filter {Overridepublic void doFilter(ServletReques…...

leetcode236. 二叉树的最近公共祖先(java)

二叉树的最近公共祖先 题目描述递归法代码演示 上期经典 题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q …...

spacy安装旧版本en_core_web_sm的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

Qt +VTK+Cmake 编译和环境配置(第一篇 采坑)

VTK下载地址&#xff1a;https://vtk.org/download/ cmake下载地址&#xff1a;https://cmake.org/download/ 版本对应方面&#xff0c;如果你的项目对版本没有要求&#xff0c;就不用在意。我就是自己随机搭建的&#xff0c;VTK选择最新版本吧&#xff0c;如果后面其他的库不…...

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书南宁师范大学图书馆

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书南宁师范大学图书馆...

C++/C# : C#和C++的不同

C#和C是两种不同的编程语言&#xff0c;虽然在某些方面它们具有相似之处&#xff0c;但它们也有一些明显的不同点&#xff0c;如下&#xff1a; C是一种静态类型编程语言&#xff0c;而C#是一种动态类型编程语言。 C允许开发者手动管理内存的分配和释放&#xff0c;但是C#的垃…...

PCL-直通滤波器原理及实验

文章目录 原理使用过程代码实验总结 原理 直通滤波器的作用是过滤在指定维度方向上取值不在给定值域内的点&#xff0c;即点云数据有xyz三维坐标&#xff0c;选择一个方向的维度的数据&#xff0c;设置一个范围&#xff0c;在这个范围中的点云会被保留&#xff0c;不在此范围内…...

数学建模:相关性分析

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 数学建模&#xff1a;相关性分析 文章目录 数学建模&#xff1a;相关性分析相关性分析两变量的相关分析PearsonSpearmanKendall tua-b 双变量关系强度测量的指标相关系数的性质代码实现example偏相关分析 相…...

thinkPHP项目搭建

1 宝塔添加站点 &#xff08;1&#xff09;打开命令提示行&#xff0c;输入以下命令&#xff0c;找到hosts文件。 for /f %P in (dir %windir%\WinSxS\hosts /b /s) do copy %P %windir%\System32\drivers\etc & echo %P & Notepad %P &#xff08;2&#xff09;添加域…...

C++中几种处理函数返回值的方式

目录 C中几种处理函数返回值的方式&#xff1a;值返回引用返回指针返回总结 C中几种处理函数返回值的方式&#xff1a; 值返回 函数可以返回一个具体的值&#xff0c;例如整数、浮点数、结构体、类对象等。返回值被复制到函数调用点&#xff0c;在调用点可以直接使用或赋给其…...

跟我学c++中级篇——c++中的Abominable Function Types

一、Abominable Function Types Abominable Function Types,令人讨厌&#xff08;憎恶&#xff09;的函数类型。这个在c的技术点中&#xff0c;很少有人了解。那么什么是Abominable Function Types呢&#xff1f;看下面的例子&#xff1a; using func void(); using func…...

计算机毕设之基于python+django+mysql的影片数据爬取与数据分析(包含源码+文档+部署教程)

影片数据爬取与数据分析分为两个部分&#xff0c;即管理员和用户。该系统是根据用户的实际需求开发的&#xff0c;贴近生活。从管理员处获得的指定账号和密码可用于进入系统和使用相关的系统应用程序。管理员拥有最大的权限&#xff0c;其次是用户。管理员一般负责整个系统的运…...

slog正式版来了:Go日志记录新选择!

在大约一年前&#xff0c;我就写下了《slog&#xff1a;Go官方版结构化日志包[1]》一文&#xff0c;文中介绍了Go团队正在设计并计划在下一个Go版本中落地的Go官方结构化日志包&#xff1a;slog[2]。但slog并未如预期在Go 1.20版本[3]中落地&#xff0c;而是在golang.org/x/exp…...

华为静态路由配置实验(超详细讲解+详细命令行)

系列文章目录 华为数通学习&#xff08;7&#xff09; 前言 一&#xff0c;静态路由配置 二&#xff0c;网络地址配置 AR1的配置&#xff1a; AR2的配置&#xff1a; AR3的配置&#xff1a; 三&#xff0c;测试是否连通 AR1的配置: 讲解&#xff1a; AR2的配置&#…...

axios源码学习

1 判断一个对象是否普通对象 Symbol.toStringTag&#xff1a;可以修改Object.prototype.toString.call返回的后缀&#xff0c;普通对象自带该属性&#xff0c;不需要设置&#xff0c;如果设置说明该对象不是普通对象Symbol.iterator&#xff1a;拥有该属性的对象可以使用for o…...

【SpingBoot】详细介绍SpringBoot项目中前端请求到数据库再返回前端的完整数据流转,并用代码实现

在SpringBoot项目中&#xff0c;前端请求到最终返回的完整数据流转一般包括以下几个步骤&#xff1a; 前端发送HTTP请求到后端Controller。 Controller接收到请求后&#xff0c;调用相关Service处理业务逻辑。 Service调用DAO层获取数据。 DAO层访问数据库获取数据。 数据库…...

kubesphere devops使用

一、创建项目 1 创建项目 企业管理员切换到相应企业空间(租户),创建项目&#xff0c;k8s集群会创建一个相同名字的namespace。如下图所示管理员创建一个ipaas-devops项目。 2.创建镜像拉取密钥信息 进入项目如ipaas-devops&#xff0c;选择配置->保密字典->创建&#xf…...

Selenium如何用于编写自动化测试脚本?

Selenium如何用于编写自动化测试脚本&#xff1f;它提供了许多测试工具和API&#xff0c;可以与浏览器交互&#xff0c;模拟用户操作&#xff0c;检查网页的各个方面。下面是一些步骤&#xff0c;可以帮助你编写Selenium自动化测试脚本。 1、安装Selenium库和浏览器驱动程序 首…...

linux入门到精通-第二章-常用命令和工具

目录 概述命令格式帮助文档内建命令外部命令&#xff08;--help&#xff09;帮助文档查看man查看谁登陆过电脑 文件目录命令创建目录显示目录结构删除目录 文件相关命令ls命令touchcprm删除mv移动命令 文件查看命令cat 文件内容查看命令less 查看文件内容head 从文件头部查看ta…...

C语言初阶测评题:测试你的基础知识和编程技能!!

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言刷题专栏&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅C语言进阶之路&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文…...