[rustGUI][iced]基于rust的GUI库iced（0.13）的部件学习（06）：基于iced实现一个简单的图片浏览器

OhIjkARGFWnC

前言

本文是关于iced库的部件介绍，iced库是基于rust的GUI库，作者自述是受Elm启发。
iced目前的版本是0.13.1，相较于此前的0.12版本，有较大改动。
本合集是基于新版本的关于分部件（widget）的使用介绍，包括源代码介绍、实例使用等。
环境配置

系统：window10
平台：visual studio code
语言：rust
库：iced 0.13
扩展库：iced_aw
概述

图片浏览器的实现，我们的设想是可以通过文件夹导入所有图片，然后获取的图片在界面上排布显示，其中有一个是主图片，其他图片以缩略图形式在下方，可以通过按钮切换图片的显示。
前提条件
为了实现文件夹导入，需要添加一个对话框库，即RFD：

1、新建iced项目

关于如何新建iced窗口并设置窗口参数，可以参考博文：
基于rust的GUI库iced的学习（00）：一个典型的iced窗口的实现
本文不再赘述。
本文的目的是创建一个能够导入图片并进行浏览的窗口，所以我们需要先添加以下模块：
rfd = "0.15.2"image = "0.25.5"我们的窗口基本布局如下：

如图，通过导入文件夹按钮导入图片文件夹，获取了图片列表后，在窗口动态添加并显示，而上一张和下一张按钮则可以切换图片的显示。
我们先来看view函数的基本布局：
let img_main_h=image::Handle::from_path(&self.img_main_p);                //let img_main= image(self.handle.clone());        let img_main = image(img_main_h).width(300).height(300)                                .content_fit(iced::ContentFit::Contain);        let img_sub_view = self.updateview();        let cont1=container(    column![                row![                    //button(text("打开").size(20)).width(80).on_press(Message::Open),                    button(text("导入文件夹").size(14)).width(100).on_press(Message::OpenFolder),                ],                row![                    button(text("上一张").size(14)).width(100).on_press(Message::Last),                    button(text("下一张").size(14)).width(100).on_press(Message::Next),                ].spacing(10),                img_main,                img_sub_view,                           ].padding(10).spacing(10).align_x(Center)        ).align_x(Center)        .align_y(Center)        .width(iced::Length::Fill).height(iced::Length::Fill)        .style(|t| styles::mycontainerstyle(t));        cont1.into()上面的代码中，updateview函数如下：
fn updateview(&self) ->Column<Message>{        let row1 = match self.imgs.len() {            0 => Self::contcont("无图片"),            n => {                //println!("图片数量:{}",n);                let mut row1 = row![].spacing(20);                for i in 0..n {                    row1 = row1.push(                        container(                        image(image::Handle::from_path(self.imgs.display().to_string())).width(100).height(100)                        ).style(move |t| styles::mycontainerstyle_border(t,i.to_string(),self.current_index))                    );                };                Self::contcont("图片列表").push(row1)            },        };        row1    }为什么要使用这个函数，主要目的是为了动态添加图片元素，这个函数会根据获取的图片数量，生成相应的image元素并显示在窗口（如果图片太多则会非常卡，本文未作优化）。
2、文件夹导入和遍历

在iced中，文件夹导入，我们使用rfd库来创建对话框：
if let Some(folder) = FileDialog::new()                                        .set_directory("E:\\100rust2\\iced-img")                                        .set_title("打开文件夹")                                        .pick_folder() {                                            println!("打开文件夹: {:?}", folder);                                            let paths = folderbrowser(folder).unwrap();                                            if paths.len() > 0 {                                                self.imgs.clear();                                                self.current_index = 0;                                                for path in paths {                                                    println!("文件夹中的文件: {:?}", path);                                                    self.imgs.push(path);                                                };                                                self.img_main_p = self.imgs[self.current_index].display().to_string();                                            } else {                                                MessageDialog::new()                                                    .set_title("提示")                                                    .set_description("文件夹中无图片文件！")                                                    .show();                                                println!("文件夹为空");                                            }                                                                                    }注意到，我们获取了文件夹的路径后，使用folderbrowser函数进行了遍历：
//////遍历文件夹/// pub fn folderbrowser(path:std::path::PathBuf) ->Result<Vec<std::path::PathBuf>,String> {        match std::fs::read_dir(path) {            Ok(dirs) => {                let paths = dirs.filter_map(                    |dir| {                        dir.ok().map(|dir_dir| dir_dir.path())                                .filter(|path| {                                    if let Some(ext) = path.extension() {                                        ext == "png" || ext == "jpg" || ext == "webp" || ext == "bmp" || ext == "jpeg"                                    } else {                                        false                                    }                                })                    }                ).collect();                Ok(paths)            },            Err(e) =>{                Err(format!("Error:{}",e))            }        }}如上，我们使用rust的标准库std的fs来处理文件路径，将文件夹中的每个图片路径都提取出来，而不符合图片后缀名的文件，则忽略。
3、样式实现


注意上述图片红色箭头所指，当前主图片对应的缩略图，其边框是与其他边框不一样的，如果是在前端项目中，实现这样的效果是非常简单的，而在iced中，如果我们希望实现这样的效果，就需要为图片进行自定义样式的设置。
在iced中，image元素本身是没有样式设置的，因此，我们的处理办法是在image元素外面套一层container元素：
container(                        image(image::Handle::from_path(self.imgs.display().to_string())).width(100).height(100)                        ).style(move |t| styles::mycontainerstyle_border(t,i.to_string(),self.current_index))针对于container元素，我们就可以设置其style参数，具体来说，对于缩略图的图片，我们为其添加了一层套壳，通过设置套壳的样式来展现区别。
我们新建一个styles.rs文件，在其中添加mycontainerstyle_border函数：
pub fn mycontainerstyle_border(t:&Theme,s:String,index:usize) ->iced::widget::container::Style {      if s == index.to_string() {        iced::widget::container::Style {            border:iced::Border{                color:iced::color!(0x669EF1), //#669EF1FF                width:3.0,                radius:iced::border::Radius::default(),            },            ..Default::default()        }   } else {    iced::widget::container::Style {        border:iced::Border{            color:Color::BLACK,            width:1.0,            radius:iced::border::Radius::default(),        },        ..Default::default()    }   }    }注意看上面的代码，我们实现缩略图边框变化的方法是，通过比较当前主图片的索引与图片列表的索引，如果一致，则表示当前图片是主图片，则设置其边框为蓝色加粗，否则其边框为默认。
经过验证，这个方法是简单有效的。
4、动态演示