注：此文適合于對rust有一些了解的朋友
iced是一個跨平臺的GUI庫，用于為rust語言程序構建UI界面。
這是一個系列博文，本文是第三篇，前兩篇的鏈接：
1、Rust UI開發(fā)（一）：使用iced構建UI時，如何在界面顯示中文字符
2、Rust UI開發(fā)（二）：iced中如何為窗口添加icon圖標
本篇是系列第三篇，主要關注如何在窗口上顯示圖片，要在窗口顯示一張圖片，基本上需要解決兩個問題，一是圖片文件導入，二是圖片文件顯示。這兩個功能對于其他成熟語言都不是問題，文件對話框和圖片渲染都不是難事，但iced是缺少對話框部件的。
所以，就要借助于第三方庫，下面我們將針對這兩個方面做說明。
實際窗口效果預覽：
一 文件對話框
至少目前為止（iced=0.10）iced中沒有集成對話框功能，包括文件對話框、字體、顏色、消息等對話框都沒有，但我看到其他支持rust的GUI庫如egui、nwg（native-window-gui）等都是有對話框的，當然egui中是用rfd庫來實現(xiàn)的。
所以，在本篇中，我們也是利用rfd來實現(xiàn)文件對話框功能。
rfd是Rusty File Dialogs的簡寫，是跨平臺的rust庫，提供打開/保存對話框的功能。
rfd的官方代碼：
use rfd::FileDialog;
let files = FileDialog::new()
.add_filter("text", &["txt", "rs"])
.add_filter("rust", &["rs", "toml"])
.set_directory("/")
.pick_file();
使用起來也很簡單，在你的項目的Cargo.toml中添加依賴：
rfd="0.12.1"
然后在main.rs中導入：
use rfd::FileDialog;
需要注意的是，F(xiàn)ileDialog.pickfile()函數(shù)返回的是一個枚舉類型Option,里面的數(shù)據(jù)就是文件的路徑。
所以，我們可以使用Some來返回此路徑。
if let Some(file)=FileDialog::new()
.set_directory("/")
.add_filter("all", &["*"]) //添加文件過濾，all是顯示所有類型
.add_filter("文本文件(*txt)", &["txt", "rs"]) //只顯示文本類型
.add_filter("圖像文件(*png*jpg*bmp)", &["png","jpg","jpeg","bmp"]) //只顯示圖像類型
.set_title("打開圖像")
.pick_file()
{
self.iamgepath=file.display().to_string();
};
這樣我們打開的圖像的路徑，就賦給了self.imagepath。
二 將圖片顯示在窗口界面上
我們現(xiàn)在已經(jīng)得到了圖像的路徑，那么我們?nèi)绾螌D像顯示在窗口上呢？這里需要用到iced提供的image這個功能，它是被定義為iced_widget的一個特性，即Features。Features是Rust中的一個概念，或者是一種機制。以下是rust官方手冊關于Features的概念，大家自己理解一下。
- Cargo “features” provide a mechanism to express conditional compilation and optional dependencies.
- A package defines a set of named features in the [features] table of Cargo.toml, and each feature can either be enabled or disabled. Features for the package being built can be enabled on the command-line with flags such as --features. Features for dependencies can be enabled in the dependency declaration in Cargo.toml.
本篇說明一下如何使用image這個Features，在你的項目的Cargo.toml文件中，添加了iced依賴后，添加以下語句：
iced.features=["image"]
然后可以在main.rs中導入image：
use iced::widget::{
text, button,slider,column,image,container};
另外，我們在本系列第二篇提到過一個第三方的圖像庫Image，實際上iced中處理圖像也用到了這個庫，所以我們將Image也添加到依賴中：文章來源：http://www.zghlxwxcb.cn/news/detail-763952.html
image="0.24.7"
為了不混亂iced的image和第三方image，我們在導入第三方image時，如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-763952.html
extern 到了這里，關于Rust UI開發(fā)（三）：iced如何打開圖片（對話框）并在窗口顯示圖片？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
