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

【rust/egui】(五)看看template的app.rs:SidePanel、CentralPanel以及heading

说在前面

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

SidePanel

  • 侧边栏,如下图
    在这里插入图片描述

  • 其定义为:

    pub struct SidePanel {side: Side,id: Id,frame: Option<Frame>,resizable: bool, show_separator_line: bool, // 是否显示边框default_width: f32, // 默认宽度width_range: RangeInclusive<f32>, // 宽度范围
    }
    
  • 通过right()left()方法生成:

    egui::SidePanel::right("panel_name")
    

    方法实现与TopBottomPanel::top()类似:

    pub fn right(id: impl Into<Id>) -> Self {// id需要保证全局唯一Self::new(Side::Right, id)
    }
    

    生成时的默认属性值为:

    pub fn new(side: Side, id: impl Into<Id>) -> Self {Self {side,id: id.into(),frame: None,resizable: true,show_separator_line: true,default_width: 200.0,width_range: 96.0..=f32::INFINITY,}
    }
    
  • 我们可以将app.rs中的egui::SidePanel::left("side_panel")改成right()看下效果:
    在这里插入图片描述

  • 然后让我们来看看SidePanel的其他属性

  • resizable
    默认值为true,效果如下图 (但是为啥会变回去?而且不丝滑)
    在这里插入图片描述
    右侧边栏的效果有点奇怪:
    在这里插入图片描述

    设置为false后,宽度将不可变:

    egui::SidePanel::left("side_panel").resizable(false).show
    

    注意,只有在panel中有一些需要占用空间的元素时,resizable才有效,例如只保留:

    egui::SidePanel::left("side_panel").default_width(100.0).show(ctx, |ui| {ui.heading("Side Panel");      
    });
    

    这个时候其实无法拖拽边框:
    在这里插入图片描述

  • show_separator_line
    默认值为true,修改为false后的表现为:

    egui::SidePanel::right("side_panel").show_separator_line(false).show(
    

    在这里插入图片描述
    效果不是很明显,因为CentralPanel也有边框,并且没找到方法去掉

  • default_width
    默认值200.0,可通过default_width()方法进行修改:

    pub fn default_width(mut self, default_width: f32) -> Self {// 修改self.default_widthself.default_width = default_width; // 依照default_width调整self.width_range// 例如default_width为200,那么结果依旧为96~inf// 例如default_width为80,那么结果为80~infself.width_range = self.width_range.start().at_most(default_width)..=self.width_range.end().at_least(default_width);self
    }
    

    (但是实际上没有用,不知道为啥)

Ui::heading()

  • 大号的文字,标题
    /// Show large text.
    ///
    /// Shortcut for `ui.label(RichText::new(text).heading())`
    pub fn heading(&mut self, text: impl Into<RichText>) -> Response {Label::new(text.into().heading()).ui(self)
    }
    
  • 我们也可以使用ui.label(RichText::new(text).heading())来自定义,例如:
    ui.label(egui::widget_text::RichText::new("Side Panel").heading().color(Color32::GREEN));
    
    在这里插入图片描述

CentralPanel

  • 主面板(panel),窗口中未被其他panel占用的部分。
  • CentralPanel必须在其他panel之后添加。否则其他panel将会覆盖CentralPanel
  • 以下是CentralPanelSidePanel之前添加的效果,可以看到有部分元素被挡住了:
    在这里插入图片描述
  • 可以看看不加CentralPanel的效果:
    在这里插入图片描述
  • CentralPanel没有可以自定义的属性

Panel之间的布局

  • 目前来看,eguipanel有三种:CentralSideTopBottom

  • panel的添加顺序是非常重要的,先添加的在最外层,后添加的在内层

  • 例如,在我们的template中,添加顺序是TopBottomSideCentral,其结果是:
    在这里插入图片描述

  • 如果改为SideTopBottomCentral,其结果为:
    在这里插入图片描述

  • 同时,一个窗口中panel可以不止3个,例如我们可以这样添加:TopBottomSideTopBottomCentral
    在这里插入图片描述

  • 如果想要将sidepanel拆分为上下两部分,是否可以实现,怎样实现呢?这部分留着后面探讨。

参考

  • richtext
  • sidepanel
  • centralpanel

相关文章:

【rust/egui】(五)看看template的app.rs:SidePanel、CentralPanel以及heading

说在前面 rust新手&#xff0c;egui没啥找到啥教程&#xff0c;这里自己记录下学习过程环境&#xff1a;windows11 22H2rust版本&#xff1a;rustc 1.71.1egui版本&#xff1a;0.22.0eframe版本&#xff1a;0.22.0上一篇&#xff1a;这里 SidePanel 侧边栏&#xff0c;如下图 …...

MTK6833_MT6833核心板_天玑700安卓5G核心板规格性能介绍

MTK6833安卓核心板采用台积电 7nm 制程的5G SoC&#xff0c;2*Cortex-A766*Cortex-A55架构&#xff0c;搭载Android12.0操作系统&#xff0c;主频最高达2.2GHz 。内置 5G 双载波聚合技术&#xff08;2CC&#xff09;及双 5G SIM 卡功能&#xff0c;实现优异的功耗表现及实时连网…...

Maven-Java代码格式化插件spring-javaformat

TOC 官方文档&#xff1a;点击进入 前言 项目研发过程中&#xff0c;随着团队人员的增加变更环境配置的不同&#xff0c;有些同学甚至没有格式化代码的习惯&#xff0c;导致编码风格不统一杂乱无章&#xff0c;为解决这一问题引入Spring提供的格式化代码插件。插件支持多种方…...

设计模式之八:模板方法模式

泡咖啡和泡茶的共同点&#xff1a; 把水煮沸沸水冲泡咖啡/茶叶冲泡后的水倒入杯子添加糖和牛奶/柠檬 class CoffeineBeverage { public:void prepareRecipe(){boilWater();brew();pourInCup();addCondiments();}private:void boilWater(){std::cout << "Boiling w…...

hive可以删除单条数据吗

参考&#xff1a; hive只操作几条数据特别慢 hive可以删除单条数据吗_柳随风的技术博客_51CTO博客...

python3-Flask实现Api接口

1、&#xff1a;python3-Flask实现Api接口_flask api_Shiro to kuro的博客-CSDN博客 2、 Flask框架的web开发01&#xff08;Restful API接口规范&#xff09;_flask patch post_~须尽欢的博客-CSDN博客...

微分享 - 超实用开发日常排查问题Linux运维命令

目录 CPUCPU基本信息CPU使用情况ps 命令可用于确定哪个进程占用了 CPU 内存free 网络查看端口curl 常用命令 文件df 、du 区别磁盘使用情况文件大小文件下载压缩&解压缩查找文件查找文件内容 进程CPU 使用来升序排序内存 使用升序排序 其他常用操作系统进本信息赋予文件执行…...

Pico如何使用C/C++选择哪个I2C控制器,以及SDA和SCL针脚

本文一开始讲述了解决方案&#xff0c;后面是我做的笔记&#xff0c;用来讲述我的发现流程和探究的 Pico I2C 代码结构。 前提知识 首先要说明一点&#xff1a;Pico 有两个 I2C&#xff0c;也就是两套 SDA 和 SCL。这点你可以在针脚图中名字看出&#xff0c;比如下图的 Pin 4…...

求生之路2私人服务器开服搭建教程centos

求生之路2私人服务器开服搭建教程centos 大家好我是艾西&#xff0c;朋友想玩求生之路2(left4dead2)重回经典。Steam玩起来有时候没有那么得劲&#xff0c;于是问我有没有可能自己搭建一个玩玩。今天跟大家分享的就是求生之路2的自己用服务器搭建的一个心路历程。 &#xff0…...

Redis7之介绍(一)

1. 是什么 Redis:REmote Dictionary Server(远程字典服务器&#xff09; Remote Dictionary Server( 远程字典服务)是完全开源的&#xff0c;使用ANSIC语言编写遵守BSD协议&#xff0c;是一个高性能的Key-Value数据库提供了丰富的数据结构&#xff0c;例如String、Hash、List、…...

基于Python+djangoAI 农作物病虫害预警系统智能识别系统设计与实现(源码&教程)

1.背景 随着科技的发展&#xff0c;机器学习技术在各个领域中的应用越来越广泛。在农业领域&#xff0c;机器学习技术的应用有助于提高农作物的产量和质量&#xff0c;降低农业生产的成本。本文针对农作物健康识别问题&#xff0c;提出一种基于机器学习方法的农作健康识别系统&…...

Kotlin Flow 转换以及上下游处理

本片文章主要介绍Flow上下游处理&#xff0c;上游一个Flow使用map&#xff0c;上游两个Flow使用zip&#xff0c;上游三个Flow及以上使用combine 1、下面代码展示了upStreamFlow作为上游&#xff0c;downStreamFlow作为下游&#xff0c;通过对upStreamFlow使用map操作符函数将…...

深度学习3. 强化学习-Reinforcement learning | RL

强化学习是机器学习的一种学习方式&#xff0c;它跟监督学习、无监督学习是对应的。本文将详细介绍强化学习的基本概念、应用场景和主流的强化学习算法及分类。 目录 什么是强化学习&#xff1f; 强化学习的应用场景 强化学习的主流算法 强化学习(reinforcement learning) …...

TCP/IP网络江湖武艺传承:物理层与通信江湖的幕后

目录 〇、引言:进入现代通信技术的江湖 一、数字信号与模拟信号:传承与差异...

智慧能源管理系统助力某制造企业提高能源利用效率

随着全球能源需求不断增加和能源价格的上涨&#xff0c;企业和机构日益意识到能源管理的重要性。传统的能源管理方式不仅效率低下&#xff0c;还容易造成资源浪费和环境污染。因此&#xff0c;许多企业开始探索采用智慧能源管理系统来提高能源利用效率&#xff0c;降低能源成本…...

opencv/C++ 人脸检测

前言 本文使用的测试资源说明&#xff1a; opencv版本&#xff1a;opencv 4.6.0 人脸检测算法 Haar特征分类器 Haar特征分类器是一个XML文件&#xff0c;描述了人体各个部位的Haar特征值。包括&#xff1a;人脸、眼睛、鼻子、嘴等。 opencv 4.6.0自带的Haar特征分类器&…...

UE4/5的Custom节点:在VScode使用HLSL(新手入门用)

目录 custom节点 VSCode环境安装 将VSCode里面的代码放入Custom中 custom节点 可以看到这是一个简单的Custom节点&#xff1a; 而里面是可以填写代码的&#xff1a; 但是在这里面去写代码会发现十分的繁琐【按下enter后&#xff0c;不会换行&#xff0c;也不会自动缩进】 …...

小研究 - J2EE 应用服务器的软件老化测试研究

软件老化现象是影响软件可靠性的重要因素&#xff0c;长期运行的软件系统存在软件老化现象&#xff0c;这将影响整个业务系统的正常运行&#xff0c;给企事业单位带来无可估量的经济损失。软件老化出现的主要原因是操作系统资源消耗殆尽&#xff0c;导致应用系统的性能下降甚至…...

Tomcat和Servlet基础知识的讲解(JavaEE初阶系列16)

目录 前言&#xff1a; 1.Tomcat 1.1Tomcat是什么 1.2下载安装 2.Servlet 2.1什么是Servlet 2.2使用Servlet来编写一个“hello world” 1.2.1创建项目&#xff08;Maven&#xff09; 1.2.2引入依赖&#xff08;Servlet&#xff09; 1.2.3创建目录&#xff08;webapp&a…...

开源在大数据和分析中的角色

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...