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

前言

本文是关于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[i].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[i].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、动态演示