Rust+Slint 实现左右伸缩式图片浏览器源码分享(最新)

一、效果展示

二、源码分享

1、工程结构

2、main.rs

slint::include_modules!();
fn main() -> result<(), slint::platformerror> {
    let main_window = mainwindow::new()?;
    main_window.run()
}

3、build.rs

fn main() {
    // 编译 slint ui
    slint_build::compile("ui/main.slint").unwrap();
}

4、main.slint

component accordioncard inherits rectangle {
    in property <image> source;
    border-radius: 5px;
    clip: true;
    min-width: 50px;
    preferred-width: 0px;
    background: #646464;
    ta := toucharea {
        width: 100%;
        height: 100%;
    }
    // 动画拉伸属性：悬停时从 1 平滑过渡到 5
    property <float> my-stretch: ta.has-hover ? 5.0 : 1.0;
    animate my-stretch { duration: 280ms; easing: ease-out; }
    horizontal-stretch: my-stretch;
    image {
        source: root.source;
        width: 100%;
        height: 100%;
        image-fit: cover;
    }
}
export component mainwindow inherits window {
    preferred-width: 900px;
    preferred-height: 500px;
    title: "伸缩式图片浏览器";
    background: #34495e;
    horizontallayout {
        spacing: 5px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        for img in [
            @image-url("../images/apple.svg"),
            @image-url("../images/banana.svg"),
            @image-url("../images/mango.svg"),
            @image-url("../images/peach.svg"),
            @image-url("../images/strawberry.svg"),
            @image-url("../images/watermelon.svg"),
        ] : accordioncard {
            source: img;
        }
    }
}

5、cargo.toml

[package]
name = "sokoban"
version = "0.1.0"
edition = "2024"
[dependencies]
slint = "1.16.1"
[build-dependencies]
slint-build = "1.16.1"

三、实现原理

本项目的核心是利用 slint ui 框架 的声明式语法和动画系统，结合 rust 的高性能特性，实现一个具有悬停伸缩效果的图片浏览器。其实现原理可分为以下几个关键部分：

1、 组件化设计：accordioncard

在 main.slint 文件中，我们定义了一个可复用的 accordioncard 组件，它继承自 rectangle。这是整个效果的核心载体。

• 属性绑定：通过 in property <image> source; 声明了一个输入属性，用于接收外部传入的图片资源。
• 悬停检测：组件内部包含一个覆盖整个区域的 toucharea (ta)。toucharea 能够检测鼠标悬停 (has-hover) 事件。
• 动画属性：定义了一个自定义属性 my-stretch，其值由悬停状态决定：ta.has-hover ? 5.0 : 1.0。这意味着悬停时目标拉伸倍数为5，否则为1。
• 平滑过渡：通过 animate my-stretch { duration: 280ms; easing: ease-out; } 声明，使 my-stretch 属性的变化在280毫秒内以“缓出”的动画曲线完成，从而产生平滑的伸缩效果。
• 布局控制：最终将 my-stretch 属性赋值给 horizontal-stretch，控制组件在水平方向上的拉伸因子，直接影响其在 horizontallayout 中所占的空间比例。

2、主窗口与动态布局

mainwindow 组件是应用的根窗口。

• 布局管理：使用 horizontallayout 作为容器，它默认会将其子组件（即多个 accordioncard）在水平方向上依次排列。
• 数据驱动ui：通过 for...in 循环语法，动态创建一组 accordioncard 实例。循环遍历一个图片url数组，并将每张图片 (img) 作为 source 属性传递给对应的卡片。
• 交互联动：当用户鼠标悬停在某个卡片上时，该卡片的 my-stretch 属性变为5，触发动画并横向扩展。horizontallayout 会立即重新计算所有子组件的尺寸，由于其他卡片未悬停（stretch 为1），布局空间会自然向被悬停的卡片倾斜，形成“左右伸缩”的视觉效果。

3、 rust 后端与构建流程

rust 代码 (main.rs) 非常简洁，体现了 slint 框架“声明式ui，逻辑与呈现分离”的特点。

• 模块引入：slint::include_modules!() 是一个宏，它在编译时将 main.slint 中定义的 ui 组件（如 mainwindow）转换为 rust 代码并包含进来。
• 窗口生命周期：main 函数中，创建 mainwindow 新实例并调用 run() 方法，启动事件循环，使窗口保持响应直到关闭。
• 构建脚本：build.rs 在项目编译时执行，调用 slint_build::compile 函数预编译 ui/main.slint 文件，将其转换为高效的 rust 代码，这是集成 slint ui 的必要步骤。

4、 技术要点总结

1. 声明式与响应式：整个ui效果完全在 .slint 文件中通过声明属性、绑定和动画完成，无需编写冗长的命令式布局或动画代码。
2. 属性绑定与动画系统：利用 property 和 animate 关键字，轻松实现了状态（悬停）到样式（宽度）的响应式绑定与平滑过渡。
3. 布局引擎的灵活性：horizontallayout 与 horizontal-stretch 属性的配合，使得实现这种动态伸缩布局变得非常简单。
4. 高效的 rust 集成：编译时处理 ui 定义，保证了运行时的性能，同时享受 rust 的安全性与生态。

通过以上机制，我们仅用百行左右的代码，就实现了一个视觉效果流畅、交互自然的伸缩式图片浏览器。

到此这篇关于rust+slint 实现左右伸缩式图片浏览器源码分享(最新)的文章就介绍到这了,更多相关rust slint 左右伸缩式图片浏览器内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！