怀柔网站整站优化公司,360网站推广官网授权商,模板网站建设哪家好,网站开发的相关技术说在前面 rust新手#xff0c;egui没啥找到啥教程#xff0c;这里自己记录下学习过程环境#xff1a;windows11 22H2rust版本#xff1a;rustc 1.71.1egui版本#xff1a;0.22.0eframe版本#xff1a;0.22.0上一篇#xff1a;这里 TextEdit 文本编辑框 其定义为#…说在前面 rust新手egui没啥找到啥教程这里自己记录下学习过程环境windows11 22H2rust版本rustc 1.71.1egui版本0.22.0eframe版本0.22.0上一篇这里 TextEdit 文本编辑框 其定义为 pub struct TextEditt {text: t mut dyn TextBuffer,hint_text: WidgetText,id: OptionId,id_source: OptionId,font_selection: FontSelection,text_color: OptionColor32, // 文本颜色layouter: Optiont mut dyn FnMut(Ui, str, f32) - ArcGalley,password: bool, // 是否是密码frame: bool,margin: Vec2, multiline: bool, // 是否支持多行文本interactive: bool, // 是否可编辑desired_width: Optionf32, // 宽度desired_height_rows: usize, // 文本行数lock_focus: bool,cursor_at_end: bool, min_size: Vec2, // 最小大小align: Align2, // 边距clip_text: bool, // 显示时是否进行裁剪char_limit: usize, // 文字上限
}用起来可能是个简单的东西但是实际上很是复杂首先我们来看看它的外观以及用法 在app.rs中我们是通过以下方式添加的 ui.text_edit_singleline(label);它添加的是一个简单的单行输入框 pub fn singleline(text: t mut dyn TextBuffer) - Self {Self {desired_height_rows: 1, // 文本行数multiline: false, // 是否多行否clip_text: true, // 显示时是否裁剪文本是..Self::multiline(text)}
}同样我们可以通过ui.add()的方式来自定义属性 clip_text ui.add(egui::TextEdit::singleline(label).clip_text(false));效果如下输入文本后文本框宽度将随着输入文本扩展 interactive ui.add(egui::TextEdit::singleline(label).clip_text(false).interactive(false)); 效果如下文本框将不可编辑但是同样也不能选中也就不能复制 我们可以添加一个多行文本输入框看看 ui.add(egui::TextEdit::multiline(label));效果如下 由于我们使用的是同一个可变引用所以在任意一个输入框输入文本时两边会同时改变 另外我们也可以实现不可编辑但是可以选中的效果 ui.add(egui::TextEdit::multiline(mut label.as_str()));这里有个地方无法理解mut label.as_str()的类型是mut str这是个啥对str的可变引用mut str和mut str的区别是啥使用str倒是能理解因为text: t mut dyn TextBuffer是限定了TextBuffer特征的而egui只为String和str实现了该特征并且一个可变一个不可变符合预期。impl TextBuffer for String {fn is_mutable(self) - bool {true}// ..
}impla TextBuffer for a str {fn is_mutable(self) - bool {false}// ..
}输入框也支持对事件进行响应 let response ui.add(egui::TextEdit::singleline(mut my_string));
if response.changed() {// …
}
if response.lost_focus() ui.input(|i| i.key_pressed(egui::Key::Enter)) {// …
}进阶用法 let output egui::TextEdit::singleline(label).show(ui);
if let Some(text_cursor_range) output.cursor_range {use egui::TextBuffer as _;let selected_chars text_cursor_range.as_sorted_char_range();let selected_text label.char_range(selected_chars);ui.label(Selected text: );ui.monospace(selected_text);
}变量绑定过程
初次接触update函数以及输入框对于label变量是怎样和文本输入框的内容绑定在一起还是很感兴趣的看了一些源码后有一些猜想这里记录下首先text是特征对象TextBuffer的可变引用而特征TextBuffer则有一些关键的方法例如insert_text()impl TextBuffer for String {fn is_mutable(self) - bool {true}fn as_str(self) - str {self.as_ref()}fn insert_text(mut self, text: str, char_index: usize) - usize {// Get the byte index from the character indexlet byte_idx self.byte_index_from_char_index(char_index);// Then insert the stringself.insert_str(byte_idx, text);text.chars().count()}fn delete_char_range(mut self, char_range: Rangeusize) {assert!(char_range.start char_range.end);// Get both byte indiceslet byte_start self.byte_index_from_char_index(char_range.start);let byte_end self.byte_index_from_char_index(char_range.end);// Then drain all characters within this rangeself.drain(byte_start..byte_end);}fn clear(mut self) {self.clear();}fn replace(mut self, text: str) {*self text.to_owned();}fn take(mut self) - String {std::mem::take(self)}
}通过这些方法可以对变量值进行修改而后就是调用这些方法的过程是怎样的查找insert_text()方法的引用可以找到一个events()函数/// Check for (keyboard) events to edit the cursor and/or text.
/// 监听文本框中光标/文本对应的(键盘)事件
fn events()也就是说在我们使用键盘输入字符时会触发对应的事件从而调用到对应的insert_text()方法从而改变对应的变量值。但是这其中又有另外一个问题在前面的文章中有提到update函数也是触发了对应的事件后才会被调用的 而我们的变量label是在update函数开始才进行的绑定那么这个输入文本 到 对应变量值改变的具体过程(顺序)是怎样的呢首先说猜想 后面证明该猜想是错误的 应用启动update会首次调用一次这个时候我们的变量label通过层层转移最终显示到文本框中。这个时候输入字符eframe监听到事件将事件通知egui进行分发events()函数触发修改对应的值egui调用update函数更新ui 上面的猜想中主要的点在于变量值在update函数前就被更新了所以我们可以添加日志进行验证fn update(mut self, ctx: egui::Context, _frame: mut eframe::Frame) {let Self { label, value } self;log::error!({}, label);// ...log::error!(update end {}, label);}日志输出为[2023-08-27T09:42:45Z ERROR demo_app::app] o0olele
[2023-08-27T09:42:45Z ERROR demo_app::app] update end o0olele
[2023-08-27T09:42:45Z ERROR demo_app::app] o0olele
[2023-08-27T09:42:45Z ERROR demo_app::app] update end o0olele1可以看到在输入字符的那一次update中变量值在函数开始时并没有发生变化也就是说刚刚的猜想是错的那是怎么回事呢 让我们回过头来看看events()的引用居然是在show()函数中被调用的而show()是在update中调用的所以实际的过程应该是 应用启动update会首次调用一次这个时候我们的变量label通过层层转移最终显示到文本框中。这个时候输入字符eframe监听到事件将事件通知egui进行分发并调用update函数label变量再次进行绑定之后在TextEdit对应的show()方法中检测到对应的事件进而修改对应的变量值更新ui
参考
Rust: the weird but safe stringTextEdit
