【rust/egui】(六)看看template的app.rs:TextEdit

说在前面

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

TextEdit

  • 文本编辑框
    【rust/egui】(六)看看template的app.rs:TextEdit_第1张图片

  • 其定义为:

    pub struct TextEdit<'t> {
        text: &'t mut dyn TextBuffer,
        hint_text: WidgetText,
        id: Option<Id>,
        id_source: Option<Id>,
        font_selection: FontSelection,
        text_color: Option<Color32>, // 文本颜色
        layouter: Option<&'t mut dyn FnMut(&Ui, &str, f32) -> Arc<Galley>>,
        password: bool, // 是否是密码
        frame: bool,
        margin: Vec2, 
        multiline: bool, // 是否支持多行文本
        interactive: bool, // 是否可编辑
        desired_width: Option<f32>, // 宽度
        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));                
    

    效果如下,文本框将不可编辑,但是同样也不能选中(也就不能复制)
    【rust/egui】(六)看看template的app.rs:TextEdit_第2张图片

  • 我们可以添加一个多行文本输入框看看:

    ui.add(egui::TextEdit::multiline(label));
    

    效果如下
    【rust/egui】(六)看看template的app.rs:TextEdit_第3张图片
    由于我们使用的是同一个可变引用,所以在任意一个输入框输入文本时,两边会同时改变

  • 另外,我们也可以实现不可编辑但是可以选中的效果:

    ui.add(egui::TextEdit::multiline(&mut label.as_str()));
    

    【rust/egui】(六)看看template的app.rs:TextEdit_第4张图片

    • 这里有个地方无法理解,&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
          }
          // ..
      }
      
      impl<'a> 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 index
            let byte_idx = self.byte_index_from_char_index(char_index);
    
            // Then insert the string
            self.insert_str(byte_idx, text);
    
            text.chars().count()
        }
    
        fn delete_char_range(&mut self, char_range: Range<usize>) {
            assert!(char_range.start <= char_range.end);
    
            // Get both byte indices
            let 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 range
            self.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中,变量值在函数开始时并没有发生变化,也就是说刚刚的猜想是错的
  • 那是怎么回事呢?
    【rust/egui】(六)看看template的app.rs:TextEdit_第5张图片
  • 让我们回过头来看看events()的引用,居然是在show()函数中被调用的,而show()是在update中调用的
  • 所以实际的过程应该是:
    • 应用启动,update会首次调用一次,这个时候,我们的变量label通过层层转移,最终显示到文本框中。
    • 这个时候输入字符,eframe监听到事件,将事件通知egui进行分发并调用update函数
    • label变量再次进行绑定
    • 之后,在TextEdit对应的show()方法中,检测到对应的事件,进而修改对应的变量值
    • 更新ui

参考

  • Rust: the weird but safe string
  • TextEdit

你可能感兴趣的:(Rust,rust,开发语言,后端)