＜Rust＞egui学习之部件（十三）：如何为文本添加链接Link和超链接HyperLink功能？

news2024/12/25 13:36:47

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

环境配置
系统：windows
平台：visual studio code
语言：rust
库：egui、eframe

概述
本文是本专栏的第十三篇博文，主要讲述链接和超链接部件的使用。

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

系列博客链接：
1、＜Rust＞egui学习之小部件（一）：如何在窗口及部件显示中文字符？
2、＜Rust＞egui学习之小部件（二）：如何在egui窗口中添加按钮button以及标签label部件？
3、＜Rust＞egui学习之小部件（三）：如何为窗口UI元件设置布局（间隔、水平、垂直排列）？
4、＜Rust＞egui学习之小部件（四）：如何在窗口中添加滚动条Scroll部件？
5、＜Rust＞egui学习之小部件（五）：如何在窗口中添加图像部件？
6、＜Rust＞egui学习之小部件（六）：如何在窗口中添加菜单栏部件？
7、＜Rust＞egui学习之小部件（七）：如何在窗口中添加颜色选择器colorpicker部件？
8、＜Rust＞egui学习之小部件（八）：如何在窗口中添加滑动条slider部件？
9、＜Rust＞egui学习之小部件（九）：如何在窗口中添加下拉列表combobox部件？
10、＜Rust＞egui学习之小部件（十）：如何在窗口中添加复选框checkbox部件？
11、＜Rust＞egui学习之部件（十一）：如何在窗口中添加单选框radiobutton部件？
12、＜Rust＞egui学习之部件（十二）：如何添加右键菜单？

部件属性

在egui里，有两种链接功能，一种是link，如果你需要链接到网页，则使用hyperlink。这里的链接是附加于文本上的，使文本具备可以点击的功能。
link：

pub struct Link {   
    text: WidgetText, 
}

impl Link { 
    pub fn new(text: impl Into<WidgetText>) -> Self { 
        Self { text: text.into() } 
    }
}

hyperlink：

pub struct Hyperlink {      
    url: String,
    text: WidgetText,
    new_tab: bool,
}

impl Hyperlink {
    #[allow(clippy::needless_pass_by_value)]
    pub fn new(url: impl ToString) -> Self {
        let url = url.to_string();
        Self {
            url: url.clone(),
            text: url.into(),
            new_tab: false,
        }
    }

    #[allow(clippy::needless_pass_by_value)]
    pub fn from_label_and_url(text: impl Into<WidgetText>, url: impl ToString) -> Self {
        Self {
            url: url.to_string(),
            text: text.into(),
            new_tab: false,
        }
    }

    /// Always open this hyperlink in a new browser tab.
    #[inline]
    pub fn open_in_new_tab(mut self, new_tab: bool) -> Self {
        self.new_tab = new_tab;
        self
    }
}

看一下实际使用：

if ui.link("link").clicked(){   
                self.linkflag=true;
            };
            ui.hyperlink("https://www.baidu.com");

UI显示：
在这里插入图片描述
二者的区别是，link只能为文本标签添加点击功能，点击后可以触发反馈，而hyperlink可以将文本为网址的链接跳转到网页。

代码稍作修改：

ui.horizontal(|ui|{
                if ui.link("link").clicked(){  
                    if self.linkflag{
                        self.linkflag=false;
                    }else{
                        self.linkflag=true;
                    }
                };
                if self.linkflag{
                    ui.label("link");
                }
            });
            
           
            ui.hyperlink("https://www.baidu.com");