Rust+Slint 实现飞控仪表盘:姿态、高度、速度、导航仪等飞行数据实时显示（二）

原创 于 2026-08-25 06:00:00 发布 · 870 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
Slint

当前文章被收录于：

Slint
10 篇文章 0 人学习
订阅专栏 查看详情

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

Rust+Slint 实现飞控仪表盘:姿态、高度、速度、导航仪等飞行数据实时显示（二）

一、说明

由于篇幅限制此篇只显示3个仪表，剩余见下一篇

二、效果展示

在这里插入图片描述
在这里插入图片描述

三、源码分享

1、工程结构

在这里插入图片描述

2、alt_widget.slint

// ALT Widget — matching alt_widget.py (240x240 scene)
export component AltWidget {
    in property<float> altitude: 0;
    in property<float> pressure: 28;
    in property<float> wScale: 1.0;

    property<float> h1Angle: altitude * 0.036;
    property<float> h2Angle: (altitude + 0.5 - Math.floor((altitude + 0.5) / 1000.0) * 1000.0) * 0.36;
    property<float> f1Angle: -(pressure - 28.0) * 100.0;
    property<float> f3Angle: altitude * 0.0036;

    // z=-50
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        transform-origin: { x: 120px, y: 120px };
        transform-rotation: f1Angle * 1deg;
        source: @image-url("../images/alt/alt_face_1.svg");
    }
    // z=-40
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        source: @image-url("../images/alt/alt_face_2.svg");
    }
    // z=-30
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        transform-origin: { x: 120px, y: 120px };
        transform-rotation: f3Angle * 1deg;
        source: @image-url("../images/alt/alt_face_3.svg");
    }
    // z=-20
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        transform-origin: { x: 120px, y: 120px };
        transform-rotation: h1Angle * 1deg;
        source: @image-url("../images/alt/alt_hand_1.svg");
    }
    // z=-10
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        transform-origin: { x: 120px, y: 120px };
        transform-rotation: h2Angle * 1deg;
        source: @image-url("../images/alt/alt_hand_2.svg");
    }
    // z=10
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        source: @image-url("../images/alt/alt_case.svg");
    }
}

3、asi_widget.slint

// ASI Widget — matching asi_widget.py (240x240 scene)
export component AsiWidget {
    in property<float> airspeed: 0;
    in property<float> wScale: 1.0;

    // Piecewise angle calculation (matching Python exactly)
    property<float> spd: Math.min(235, Math.max(0, airspeed));
    property<float> angle: spd < 40
        ? 0.9 * spd
        : spd < 70
            ? 36.0 + 1.8 * (spd - 40.0)
            : spd < 130
                ? 90.0 + 2.0 * (spd - 70.0)
                : spd < 160
                    ? 210.0 + 1.8 * (spd - 130.0)
                    : 264.0 + 1.2 * (spd - 160.0);

    // z=-20
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        source: @image-url("../images/asi/asi_face.svg");
    }
    // z=-10: hand rotates around center
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        transform-origin: { x: 120px, y: 120px };
        transform-rotation: angle * 1deg;
        source: @image-url("../images/asi/asi_hand.svg");
    }
    // z=10
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        source: @image-url("../images/asi/asi_case.svg");
    }
}

4、hsi_widget.slint

// HSI Widget — matching hsi_widget.py (240x240 scene)
export component HsiWidget {
    in property<float> heading: 0;
    in property<float> wScale: 1.0;

    // z=-20: face rotates with -heading
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        transform-origin: { x: 120px, y: 120px };
        transform-rotation: -heading * 1deg;
        source: @image-url("../images/hsi/hsi_face.svg");
    }
    // z=10
    Image {
        x: 0; y: 0;
        width: 240px; height: 240px;
        source: @image-url("../images/hsi/hsi_case.svg");
    }
}

5、main.slint

// Aircraft instruments — Rust + Slint
// 3×3 grid matching main.py, Auto Simulate only.

import { Button } from "std-widgets.slint";
import { AdiWidget } from "adi_widget.slint";
import { TcWidget } from "tc_widget.slint";
import { NavWidget } from "nav_widget.slint";
import { AltWidget } from "alt_widget.slint";
import { AsiWidget } from "asi_widget.slint";
import { HsiWidget } from "hsi_widget.slint";
import { VsiWidget } from "vsi_widget.slint";

export component MainWindow inherits Window {
    preferred-width: 1200px;
    preferred-height: 980px;
    background: #111;

    // ── grid cell size ──
    property<float> cellW: 360;
    property<float> cellH: 270;
    property<float> gridGap: 8;
    property<float> s240: Math.min(cellW, cellH) / 240;
    property<float> s300: Math.min(cellW, cellH) / 300;

    // ════════════════════════════════════════════════
    //  Grid View (3×3)
    // ════════════════════════════════════════════════
    Rectangle {
        x: 10px; y: 10px;
        width: (3 * cellW + 2 * gridGap) * 1px;
        height: (3 * cellH + 2 * gridGap + 30) * 1px;
        background: #444;

        Text {
            x: 0; y: 4px; width: 100%;
            text: "Multi-Instrument Display  (3×3)";
            color: #00d4ff; font-size: 16px; font-weight: FontWeight.bold;
            horizontal-alignment: center;
        }

        // ── row 0: TC  Nav  ADI ──
        Rectangle {
            x: 10px; y: 30px;
            width: cellW * 1px; height: cellH * 1px;
            background: #222;
            TcWidget {
                x: (parent.width - 240px * s240) / 2;
                y: (parent.height - 240px * s240) / 2;
                wScale: s240;
                turnRate: root.turnRate;
                slipSkid: root.slipSkid;
            }
        }
        Rectangle {
            x: (10 + cellW + gridGap) * 1px; y: 30px;
            width: cellW * 1px; height: cellH * 1px;
            background: #222;
            NavWidget {
                x: (parent.width - 300px * s300) / 2;
                y: (parent.height - 300px * s300) / 2;
                wScale: s300;
                heading: root.gridHeading;
                headingBug: root.gridHeadingBug;
                course: root.gridCourse;
                bearing: root.gridBearing;
                deviation: root.gridDeviation;
                distance: root.gridDistance;
                brgVisible: true;
                devVisible: true;
                distVisible: true;
                crsText: root.navCrsText;
                hdgText: root.navHdgText;
            }
        }
        Rectangle {
            x: (10 + 2 * (cellW + gridGap)) * 1px; y: 30px;
            width: cellW * 1px; height: cellH * 1px;
            background: #222;
            AdiWidget {
                x: (parent.width - 240px * s240) / 2;
                y: (parent.height - 240px * s240) / 2;
                wScale: s240;
                roll: root.roll;
                pitch: root.pitch;
            }
        }

        // ── row 1: ALT  ASI  HSI ──
        Rectangle {
            x: 10px; y: (30 + cellH + gridGap) * 1px;
            width: cellW * 1px; height: cellH * 1px;
            background: #222;
            AltWidget {
                x: (parent.width - 240px * s240) / 2;
                y: (parent.height - 240px * s240) / 2;
                wScale: s240;
                altitude: root.altitude;
                pressure: root.pressure;
            }
        }
        Rectangle {
            x: (10 + cellW + gridGap) * 1px; y: (30 + cellH + gridGap) * 1px;
            width: cellW * 1px; height: cellH * 1px;
            background: #222;
            AsiWidget {
                x: (parent.width - 240px * s240) / 2;
                y: (parent.height - 240px * s240) / 2;
                wScale: s240;
                airspeed: root.airspeed;
            }
        }
        Rectangle {
            x: (10 + 2 * (cellW + gridGap)) * 1px; y: (30 + cellH + gridGap) * 1px;
            width: cellW * 1px; height: cellH * 1px;
            background: #222;
            HsiWidget {
                x: (parent.width - 240px * s240) / 2;
                y: (parent.height - 240px * s240) / 2;
                wScale: s240;
                heading: root.heading;
            }
        }

        // ── row 2: VSI  empty  empty ──
        Rectangle {
            x: 10px; y: (30 + 2 * (cellH + gridGap)) * 1px;
            width: cellW * 1px; height: cellH * 1px;
            background: #222;
            VsiWidget {
                x: (parent.width - 240px * s240) / 2;
                y: (parent.height - 240px * s240) / 2;
                wScale: s240;
                climbRate: root.climbRate;
            }
        }
    }

    // ════════════════════════════════════════════════
    //  Auto Simulate button (bottom)
    // ════════════════════════════════════════════════
    Button {
        x: 20px;
        y: (30 + 3 * cellH + 2 * gridGap + 50) * 1px;
        width: 140px; height: 36px;
        text: { sim_running ? "■ Stop" : "▶ Auto Simulate" };
        clicked => { sim_running = !sim_running; }
    }

    // ════════════════════════════════════════════════
    //  Properties
    // ════════════════════════════════════════════════
    in-out property<float> pitch: 0;
    in-out property<float> roll: 0;
    in-out property<float> heading: 0;
    in-out property<float> altitude: 0;
    in-out property<float> airspeed: 0;
    in-out property<float> machNo: 0;
    in-out property<float> pressure: 0;
    in-out property<float> climbRate: 0;
    in-out property<float> aoa: 0;
    in-out property<float> sideslip: 0;
    in-out property<float> slipSkid: 0;
    in-out property<float> turnRate: 0;
    in-out property<float> devH: 0;
    in-out property<float> devV: 0;
    in-out property<float> gridHeading: 0;
    in-out property<float> gridHeadingBug: 0;
    in-out property<float> gridCourse: 0;
    in-out property<float> gridBearing: 0;
    in-out property<float> gridDeviation: 0;
    in-out property<float> gridDistance: 0;
    in property<float> asiS1Y: 0;
    in property<float> asiS2Y: 0;
    in property<float> altS1Y: 0;
    in property<float> altS2Y: 0;
    in property<float> altGY: 0;
    in property<float> vsiDelta: 0;
    in property<float> altVal1: 500;  in property<float> altVal2: 0;   in property<float> altVal3: -500;
    in property<float> altPosY1: 50;  in property<float> altPosY2: 125; in property<float> altPosY3: 200;
    in property<float> asiVal1: 60;  in property<float> asiPosY1: 35;
    in property<float> asiVal2: 40;  in property<float> asiPosY2: 65;
    in property<float> asiVal3: 20;  in property<float> asiPosY3: 95;
    in property<float> asiVal4: 0;   in property<float> asiPosY4: 125;
    in property<float> asiVal5: -20; in property<float> asiPosY5: 155;
    in property<float> asiVal6: -40; in property<float> asiPosY6: 185;
    in property<float> asiVal7: -60; in property<float> asiPosY7: 215;
    in property<string> spdText: "000";
    in property<string> machText: ".000";
    in property<string> altText: "     0";
    in property<string> hdgText: "000";
    in property<string> pressText: "STD";
    in property<string> navCrsText: "CRS 000";
    in property<string> navHdgText: "HDG 000";
    in-out property<int> pressureUnit: 0;
    callback cyclePressureUnit();
    in-out property<bool> sim_running: false;
    callback tick();
}

6、main.rs

slint::include_modules!();

use std::time::Duration;

// ── pressure unit ──
#[derive(Clone, Copy, PartialEq)]
enum PressureUnit { Std = 0, Mb = 1, In = 2 }

impl PressureUnit {
    fn from_i32(v: i32) -> Self {
        match v { 1 => PressureUnit::Mb, 2 => PressureUnit::In, _ => PressureUnit::Std }
    }
    fn next(self) -> Self {
        match self {
            PressureUnit::Std => PressureUnit::Mb,
            PressureUnit::Mb => PressureUnit::In,
            PressureUnit::In => PressureUnit::Std,
        }
    }
}

// ── wrap helpers ──
fn wrap_s1(val: f32) -> f32 { let mut v = val; while v > 374.5 { v -= 600.0; } v }
fn wrap_s2(val: f32) -> f32 { let mut v = val; while v > 674.5 { v -= 600.0; } v }
fn wrap_ground(val: f32) -> f32 { val.clamp(0.0, 100.0) }

// ── VSI delta ──
fn vsi_delta(cr: f32) -> f32 {
    let cr = cr.clamp(-6.3, 6.3);
    let a = cr.abs();
    let d = if a <= 1.0 { 30.0 * a }
        else if a <= 2.0 { 30.0 + 20.0 * (a - 1.0) }
        else { 50.0 + 5.0 * (a - 2.0) };
    if cr < 0.0 { -d } else { d }
}

// ── text formatters ──
fn format_airspeed(s: f32) -> String { format!("{:03}", s.clamp(0.0, 9999.0).round() as i64 % 10000) }
fn format_mach(m: f32) -> String {
    let m = m.clamp(0.0, 99.9);
    if m < 1.0 { format!(".{:03}", (m * 1000.0).round() as i64) }
    else if m < 10.0 { format!("{:.2}", m) }
    else { format!("{:.1}", m) }
}
fn format_altitude(a: f32) -> String { format!("{:5}", a.clamp(0.0, 99999.0).round() as i64) }
fn format_pressure(p: f32, u: PressureUnit) -> String {
    match u {
        PressureUnit::Std => "  STD  ".into(),
        PressureUnit::Mb => format!("{} MB", p.round() as i64),
        PressureUnit::In => format!("{:.2} IN", p),
    }
}
fn format_hdg(h: f32) -> String {
    let mut h = h; while h < 0.0 { h += 360.0; } while h > 360.0 { h -= 360.0; }
    format!("{:03}", (h + 0.5).floor() as i64 % 1000)
}
fn format_nav_crs(c: f32) -> String {
    let mut c = c; while c < 0.0 { c += 360.0; } while c > 360.0 { c -= 360.0; }
    format!("CRS {:03}", (c + 0.5).floor() as i64 % 1000)
}
fn format_nav_hdg(h: f32) -> String {
    let mut h = h; while h < 0.0 { h += 360.0; } while h > 360.0 { h -= 360.0; }
    format!("HDG {:03}", (h + 0.5).floor() as i64 % 1000)
}

// ── altitude label cycling ──
fn update_alt_labels(w: &slint::Weak<MainWindow>) {
    let Some(m) = w.upgrade() else { return };
    let alt = m.get_altitude().clamp(0.0, 99999.0);
    let base = ((alt + 0.5).floor() as i64 / 500) * 500;
    let (mut v1, mut v2, mut v3) = (base as f32 + 500.0, base as f32, base as f32 - 500.0);
    let mut delta = 0.15 * alt;
    while delta > 37.5 { delta -= 75.0; }
    if delta < 0.0 && alt > v2 { v1 += 500.0; v2 += 500.0; v3 += 500.0; }
    m.set_altVal1(v1); m.set_altVal2(v2); m.set_altVal3(v3);
    m.set_altPosY1(50.0 + delta); m.set_altPosY2(125.0 + delta); m.set_altPosY3(200.0 + delta);
}

// ── airspeed label cycling ──
fn update_asi_labels(w: &slint::Weak<MainWindow>) {
    let Some(m) = w.upgrade() else { return };
    let spd = m.get_airspeed().clamp(0.0, 9999.0);
    let base = ((spd + 0.5).floor() as i64 / 20) * 20;
    let mut vals = [0.0; 7];
    for i in 0..7 { vals[i] = (base + (60 - i as i64 * 20)) as f32; }
    let mut delta = 1.5 * spd;
    while delta > 15.0 { delta -= 30.0; }
    if delta < 0.0 && spd > vals[3] { for v in &mut vals { *v += 20.0; } }
    let by = [35.0, 65.0, 95.0, 125.0, 155.0, 185.0, 215.0];
    m.set_asiVal1(vals[0]); m.set_asiPosY1(by[0] + delta);
    m.set_asiVal2(vals[1]); m.set_asiPosY2(by[1] + delta);
    m.set_asiVal3(vals[2]); m.set_asiPosY3(by[2] + delta);
    m.set_asiVal4(vals[3]); m.set_asiPosY4(by[3] + delta);
    m.set_asiVal5(vals[4]); m.set_asiPosY5(by[4] + delta);
    m.set_asiVal6(vals[5]); m.set_asiPosY6(by[5] + delta);
    m.set_asiVal7(vals[6]); m.set_asiPosY7(by[6] + delta);
}

fn update_display(w: &slint::Weak<MainWindow>) {
    let Some(m) = w.upgrade() else { return };
    let airspeed = m.get_airspeed();
    let altitude = m.get_altitude();
    let heading = m.get_heading();
    m.set_asiS1Y(wrap_s1(1.5 * airspeed.max(0.0).min(9999.0)));
    m.set_asiS2Y(wrap_s2(1.5 * airspeed.max(0.0).min(9999.0)));
    m.set_altS1Y(wrap_s1(0.150 * altitude.max(0.0).min(99999.0)));
    m.set_altS2Y(wrap_s2(0.150 * altitude.max(0.0).min(99999.0)));
    m.set_altGY(wrap_ground(0.150 * altitude.max(0.0).min(99999.0)));
    m.set_vsiDelta(vsi_delta(m.get_climbRate()));
    update_alt_labels(&w);
    update_asi_labels(&w);
    m.set_spdText(format_airspeed(airspeed).into());
    m.set_machText(format_mach(m.get_machNo()).into());
    m.set_altText(format_altitude(altitude).into());
    m.set_hdgText(format_hdg(heading).into());
    m.set_pressText(format_pressure(m.get_pressure(), PressureUnit::from_i32(m.get_pressureUnit())).into());
    m.set_navCrsText(format_nav_crs(m.get_gridCourse()).into());
    m.set_navHdgText(format_nav_hdg(m.get_gridHeadingBug()).into());
}

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let main_window = MainWindow::new()?;
    update_display(&main_window.as_weak());

    // pressure unit cycle
    main_window.on_cyclePressureUnit({
        let w = main_window.as_weak();
        move || {
            let Some(m) = w.upgrade() else { return };
            m.set_pressureUnit(PressureUnit::from_i32(m.get_pressureUnit()).next() as i32);
            update_display(&w);
        }
    });

    // simulation state
    let sim_time = std::cell::Cell::new(0.0f32);

    main_window.on_tick({
        let w = main_window.as_weak();
        move || {
            let Some(m) = w.upgrade() else { return };
            if !m.get_sim_running() { return; }
            let t = sim_time.get() + 0.01;
            sim_time.set(t);

            m.set_roll(180.0 * (t / 10.0).sin());
            m.set_pitch(90.0 * (t / 20.0).sin());
            m.set_heading(360.0 * (t / 40.0).sin());
            m.set_slipSkid(1.0 * (t / 10.0).sin());
            m.set_turnRate((7.0 * (t / 10.0).sin()) / 6.0);
            m.set_devH(1.0 * (t / 20.0).sin());
            m.set_devV(1.0 * (t / 20.0).sin());

            let aspeed = 125.0 * (t / 40.0).sin() + 125.0;
            let alt = 9000.0 * (t / 40.0).sin() + 9000.0;
            let cr = 650.0 * (t / 20.0).sin();
            let press = 2.0 * (t / 20.0).sin() + 30.0;

            m.set_airspeed(aspeed);
            m.set_machNo(aspeed / 650.0);
            m.set_altitude(alt);
            m.set_climbRate(cr / 100.0);
            m.set_pressure(press);

            // grid nav simulation (matching main.py)
            let gh = 360.0 * (t / 40.0).sin();
            m.set_gridHeading(gh);
            m.set_gridHeadingBug(gh * 0.7);
            m.set_gridCourse(gh * 0.5);
            m.set_gridBearing(-360.0 * (t / 50.0).sin());
            m.set_gridDeviation(1.0 * (t / 20.0).sin());
            m.set_gridDistance((99.0 * (t / 100.0).sin()).abs());

            update_display(&w);
        }
    });

    let timer = slint::Timer::default();
    timer.start(slint::TimerMode::Repeated, Duration::from_millis(10), {
        let w = main_window.as_weak();
        move || { if let Some(m) = w.upgrade() { m.invoke_tick(); } }
    });

    eprintln!("Instruments started — View:Grid = 3x3 layout, View:PFD = combined display");
    main_window.run()?;
    Ok(())
}

7、Cargo.toml

[package]
name = "chart"
version = "0.1.0"
edition = "2024"

[dependencies]
slint = "1.16.1"
[build-dependencies] 
slint-build = "1.16.1"

8、完整工程和资源下载

https://download.csdn.net/download/qq_15181569/93270485

四、Slint详解

Slint 是一个用于构建原生用户界面的声明式 GUI 框架，它采用 Rust 语言编写，并支持 C++、JavaScript 等多种语言绑定。本项目的仪表盘界面正是基于 Slint 实现的，下面将从几个方面详细解析 Slint 在本项目中的应用。

1、 Slint 的核心特性

1.1 、声明式语法

Slint 使用 .slint 域特定语言（DSL）来描述 UI 的结构、样式和行为。这种声明式语法让界面布局和逻辑分离更清晰，例如本项目中的 main.slint 文件：

export component MainWindow inherits Window {
    preferred-width: 1200px;
    preferred-height: 980px;
    background: #111;
    
    // 属性定义
    property<float> cellW: 360;
    property<float> cellH: 270;
    
    // 回调定义
    callback tick();
}

1.2、 响应式属性系统

Slint 的属性系统是响应式的，当属性值发生变化时，依赖该属性的 UI 元素会自动更新。这在仪表盘中尤为重要：

// 在 tc_widget.slint 中
export component TcWidget {
    in property<float> turnRate: 0;
    in property<float> slipSkid: 0;
    
    // 计算属性，自动响应 turnRate 的变化
    property<float> markAngle: (turnRate / 3.0) * 20.0;
    
    Image {
        transform-rotation: markAngle * 1deg;  // 自动更新旋转角度
    }
}

1.3 、组件化架构

Slint 支持创建可复用的自定义组件，本项目中的每个仪表都是独立的组件：

// 定义 ADI 组件
export component AdiWidget {
    in property<float> roll: 0;
    in property<float> pitch: 0;
    in property<float> wScale: 1.0;
    
    // 组件内部实现...
}

// 在 main.slint 中复用
import { AdiWidget } from "adi_widget.slint";

AdiWidget {
    roll: root.roll;
    pitch: root.pitch;
    wScale: s240;
}

2、本项目中的 Slint 实践

2.1 、分层渲染与 Z 轴顺序

航空仪表通常由多个图层叠加而成，Slint 通过 z 属性控制渲染顺序：

// tc_widget.slint 中的分层示例
Image { /* z=-70: 背景层 */ }
Image { /* z=-60: 球体层，随 slipSkid 旋转 */ }
Image { /* z=-50: 刻度盘层 */ }
Image { /* z=-40: 指针层 */ }
Image { /* z=-30: 标记层，随 turnRate 旋转 */ }
Image { /* z=10: 外壳层 */ }

2.2 、坐标变换系统

Slint 提供了完整的 2D 变换支持，包括平移、旋转、缩放：

// 旋转变换（以中心点为原点）
Image {
    transform-origin: { x: 120px, y: 120px };
    transform-rotation: -roll * 1deg;  // 逆时针旋转
}

// 平移变换（基于 pitch 和 roll 计算）
property<float> fdx: 1.7 * pitch * Math.sin(roll * 1deg);
property<float> fdy: 1.7 * pitch * Math.cos(roll * 1deg);

Image {
    x: fdx * 1px;  // 水平偏移
    y: fdy * 1px;  // 垂直偏移
}

2.3 、属性绑定与数据流

本项目展示了从 Rust 后端到 Slint 前端的数据流：

// Rust 端更新属性
main_window.set_roll(180.0 * (t / 10.0).sin());
main_window.set_pitch(90.0 * (t / 20.0).sin());

// Slint 端响应更新
export component MainWindow {
    in-out property<float> pitch: 0;
    in-out property<float> roll: 0;
    
    // UI 自动更新
    AdiWidget {
        roll: root.roll;
        pitch: root.pitch;
    }
}

2.4、 网格布局系统

main.slint 中实现了复杂的 3×3 网格布局：

// 网格参数
property<float> cellW: 360;
property<float> cellH: 270;
property<float> gridGap: 8;

// 第一行布局计算
Rectangle {
    x: 10px; y: 30px;
    width: cellW * 1px; height: cellH * 1px;
}
Rectangle {
    x: (10 + cellW + gridGap) * 1px; y: 30px;
    width: cellW * 1px; height: cellH * 1px;
}

3、Slint 与 Rust 的集成

3.1、 模块包含机制

通过 slint::include_modules!() 宏将 .slint 文件编译为 Rust 模块：

// main.rs 开头
slint::include_modules!();  // 包含所有 .slint 文件中定义的组件

3.2 、类型安全的数据传递

Slint 提供了类型安全的属性访问接口：

// 获取属性值
let airspeed = m.get_airspeed();
let altitude = m.get_altitude();

// 设置属性值
m.set_roll(180.0 * (t / 10.0).sin());
m.set_pitch(90.0 * (t / 20.0).sin());

// 枚举类型的处理
enum PressureUnit { Std = 0, Mb = 1, In = 2 }
m.set_pressureUnit(PressureUnit::Mb as i32);

3.3、 回调与事件处理

Slint 支持从 UI 触发 Rust 回调：

// 在 .slint 中定义回调
callback cyclePressureUnit();
Button {
    text: "切换单位";
    clicked => { root.cyclePressureUnit(); }
}

// 在 Rust 中处理回调
main_window.on_cyclePressureUnit({
    let w = main_window.as_weak();
    move || {
        let Some(m) = w.upgrade() else { return };
        // 处理单位切换逻辑
        m.set_pressureUnit(new_unit as i32);
    }
});

3.4 、定时器与动画

通过 Slint 的定时器实现平滑的仪表动画：

let timer = slint::Timer::default();
timer.start(slint::TimerMode::Repeated, Duration::from_millis(10), {
    let w = main_window.as_weak();
    move || {
        if let Some(m) = w.upgrade() {
            m.invoke_tick();  // 触发 Slint 端的 tick 回调
        }
    }
});

4、性能优化技巧

4.1、 属性计算优化

将复杂计算放在 Rust 端，减少 Slint 端的计算负担：

// Rust 端预先计算
fn vsi_delta(cr: f32) -> f32 {
    let cr = cr.clamp(-6.3, 6.3);
    let a = cr.abs();
    let d = if a <= 1.0 { 30.0 * a }
        else if a <= 2.0 { 30.0 + 20.0 * (a - 1.0) }
        else { 50.0 + 5.0 * (a - 2.0) };
    if cr < 0.0 { -d } else { d }
}

// 设置到 Slint 属性
m.set_vsiDelta(vsi_delta(m.get_climbRate()));

4.2、 图片资源管理

使用相对路径引用 SVG 资源，Slint 会在编译时处理：

Image {
    source: @image-url("../images/tc/tc_back.svg");  // 编译时解析路径
}

4.3 、条件渲染

通过 visible 属性控制元素的显示/隐藏，避免不必要的渲染：

Image {
    visible: devVisible;  // 根据属性决定是否渲染
    source: @image-url("../images/nav/nav_dev_scale.svg");
}

5、 开发工作流

5.1、 构建配置

Cargo.toml 中的 Slint 依赖配置：

[dependencies]
slint = "1.16.1"  # 运行时库

[build-dependencies]
slint-build = "1.16.1"  # 构建时编译 .slint 文件

5.2 、热重载开发

Slint 支持热重载，修改 .slint 文件后无需重新编译整个项目：

# 在开发模式下运行，启用热重载
cargo run --features slint/enable-hot-reload

5.3 、调试技巧

  • 使用 eprintln! 在控制台输出调试信息
  • 通过 Slint 的 debug() 函数在 UI 中显示调试信息
  • 利用 Rust 的类型系统在编译时捕获错误

6、与其他 GUI 框架的对比

特性SlintGTKQtTauri
语言Rust（主）CC++Web 技术
渲染原生原生原生WebView
包大小较小中等较大中等
学习曲线中等陡峭中等平缓
性能优秀优秀优秀良好
跨平台是是是是

7、 总结

本项目展示了 Slint 在复杂仪表盘应用中的强大能力：

  1. 声明式 UI：通过 .slint 文件清晰描述界面结构
  2. 响应式系统：属性变化自动触发 UI 更新
  3. 高性能：原生渲染，无虚拟 DOM 开销
  4. 类型安全：Rust 编译器保证前后端类型一致
  5. 跨平台：支持 Windows、macOS、Linux、WebAssembly

Slint 特别适合需要高性能、原生外观和复杂动画的应用，如仪表盘、工业控制界面、嵌入式设备界面等。通过本项目的实践，可以看到 Slint 如何将 Rust 的系统级性能与现代化的 UI 开发体验完美结合。

在这里插入图片描述

标签
#rust #开发语言
CSP-CCF认证考试（第一次）总结，题解
2301_80221401的博客
07-18 3655
题目整体难度不大，前四题还好写，第五题hard难度的dp，思路确实想不到，写了三个小时，第三题模拟题不知道stringstream，写得很吃力，最后放弃了3，5题，得分300。有点菜继续加油。（一，二题简单无思路，三，五题代码参考自acwing）相反数有 N𝑁 个非零且各不相同的整数。请你编一个程序求出它们中有多少对相反数(a 和 −a 为一对相反数)。
四大含金量高的算法证书考试
小白学CS
11-01 5万+
四大具有含金量高的算法证书考试
CCF-CSP认证知识要求
SpadgerZ的博客
09-26 2万+
CCF-CSP认证知识要求 认证内容主要覆盖大学计算机专业所学习的程序设计、数据结构以及算法，以及相关的数学基础知识，并关注编程技巧的使用、性能的优化，以及奇异情况的正常处理。包括但不限于：    1.程序设计基础     逻辑与数学运算，分支循环，过程调用(递归)，字符串操作，文件操作等。    2.数据结构    线性表（数组、队列、栈、链表）、树（堆、排序二叉树）、哈希表、集合
2026计算机顶会“内卷”指南：CCF A/B/C类会议全解析，附最新录用率与投稿策略
最新发布
anew___的博客
05-26 705
对于硕博生毕业、求职、评奖乃至申请教职而言，发表一篇CCF推荐会议的论文，尤其是A类顶会，几乎等同于拿到了一张“硬通货”门票。了解CCF分级背后的逻辑和2026年的最新动态，能帮助你做出更明智的决策。记住，无论A、B、C，每一篇被接收的论文都是你科研路上坚实的一步。对于研究方向较为细分、或是需要快速发表以满足毕业要求的同学来说，C类会议是非常务实的选择。很多人以为B类比A类容易，但实际上，B类会议可能是“性价比”最低的选择。A类会议是每个CS学子的梦想，但也是最难啃的骨头。，虽然是A类，但录用率常年在。
第九次CCF CSP认证试题
笑彪夕的博客
12-18 5291
1问题描述 试题编号： 1 试题名称： 中间数 时间限制： 1.0s 内存限制： 256.0MB 问题描述： 问题描述 　　在一个整数序列a1, a2, …, an中，如果存在某个数，大于它的整数数量等于小于它的整数数量，则称其为中间数。在一个序列中，可
第29次CCFCSP认证经验总结
m0_62102955的博客
03-22 1万+
如果没有仔细了解过的小白去网上搜索CCFCSP，可能出现的是CSP-J/S，但是详细了解会发现，首先CSP-J/S分初试和复试，另外CSP-J/S是面向青少年（大学以下）的比赛，和NOIP类似，并且属于非专业级认证，因此作为高中学历以上的学生/程序员实际上报名的CSP并不是J/S（非专业级），而是专业级的软件能力认证。6.由于本人参加的是南京邮电大学承办的CSP，南邮的环境是基于Linux的vscode，C++，Java，python环境都是已经装好的（考试不限制语言的使用，三者之一正确即可）。
CCF CSP认证
AlbertDarren的博客
02-21 1万+
❤️CCF CSP认证 (cspro.org)❤️ 1.主办单位 中国计算机学会 (ccf.org.cn)——中国计算机领域十分权威、影响力很大的专业组织。 2.认证目的 重点考察软件开发者的算法设计和编程能力，向企业和高校推荐合格的软件人才。 3.认证内容 主要覆盖大学计算机及软件相关专业所学习程序设计、数据结构、算法，以及相关数学基础知识。 编程语言允许使用：C/C++、Java和Python。 4.认证方式 认证全部采用上机编程方式，编制的程序在限定的时间空间内通过给定的数据测试后获得相应分数。共5道
有关CCF的CSP认证
weixin_51368761的博客
12-10 2万+
有关CCF的CSP认证 一、CSP认证考点的知识要求 在数据结构中，线性表是基础，树是常考点，集合和映射要夕纪学。 背包问题（动态规划） 考试要求 二、考试题型 第一题：一般为水题，把C学扎实便可以过 第二题：难度比第一题大，比较多陷阱 第三题：题目很长但是思维难度不会比第二题大 第四题、第五题：难度大，变态题 三、知识点分布 1、字符串 对于字符串的以上处理要做到熟练，并且能够快速讲码打出。 例题分析（2013年12月第二题） C（有越界风险，可用c++的动态数组来写）： 问题：输入后只是跳过
CSP CCF认证介绍 & 备考建议
Morishima04的博客
11-12 5万+
CCF CSP认证，全称为CCF计算机软件能力认证（Certified Software Professional，简称CSP），是中国计算机学会（CCF）推出的一项针对软件开发者实际编程能力的认证。自2014年首次举办以来，CSP认证已逐渐成为衡量个人计算机专业能力的重要标准，尤其在高校和企业招聘中得到了广泛认可。
CCF-CSP认证考试真题（含题解和c++代码）
Pujx的博客
02-02 9万+
CSP-CCF 认证考试真题题解，将不定期更新。如果大家有其他解法、发现我笔误或者可以 hack 我做法/程序（合法输入导致错误输出）的地方，欢迎通过私聊与我交流。
CCF-CSP认证历年真题解（100分）
追梦鸟
09-01 3万+
转载： 链接出自：https://blog.csdn.net/tigerisland45/article/details/54755895 CCF-CSP认证历年真题解–python语言 CCF-CSP认证历年真题解–Java语言 C/C++语言: 2019.12 第18次： CCF201912-1 报数（100分）【模拟】 CCF201912-2 回收站选址（100分）【序列处理】 2019.09 第17次： CCF201909-1 小明种苹果（100分）【序列处理】 CCF201909-2 小明种苹果（
CCF-CSP认证历年真题解
热门推荐
海岛Blog
01-28 34万+
CSP认证考什么怎么考？ CCF计算机职业资格认证的每一道试题都十分经典，覆盖现实世界中方方面面的问题。这个历年试题解主要使用C/C++语言编写，将逐步增加Python和Java的解题程序。程序中附有注释，力求解题思路清晰简洁，值得珍藏与模仿。 逐题改写过程中，富文本编辑器写的博客将全部用Markdown编辑器改写。改写的第一题，都增加了Python和Java的解题程序。 2021.04第22次： CCF202104-1 灰度直方图（100分）【计数】 CCF202104-2 邻域均值（100分.
ccf csp认证考试的历年题集汇总
lvzi的博客
09-04 1万+
1.CCF历年试题解答_按题序 2.CCF认证考试题解目录 3.CCF CSP入坑指南 4.ccf 认证历年试题解答 5.CCF认证历年真题_无题意 6.CCF-CSP认证备考要点 6.CCF认证历年真题 满分代码​​​​​​​ 箴言： stay hungry stay foolish ...
CCF非专业级软件能力认证
2301_76204446的博客
04-16 4122
CSP-J/S分两个级别进行，分别为CSP-J（入门级，Junior）和CSP-S（提高级，Senior），两个级别难度不同，均涉及算法和编程。第一轮认证成绩优异者进入第二轮认证，第二轮认证结束后，CCF将根据CSP-J/S各组的认证成绩和给定的分数线，颁发认证证书。复赛一共4道题，时长是3.5小时。CSP-S2和CSP-J2认证点设置须得到CCF的批准，未经批准的认证点，其认证成绩不予承认。CSP-J和CSP-S均分别举办两轮：第一轮是CSP-J1，CSP-S1，第二轮是CSP-J2、CSP-S2。
csp计算机专业,国内计算机学会推出 CSP 非专业级别能力认证 系非专业级软件能力认证-贤集网...
weixin_39835925的博客
06-16 2399
8月23 日，中国计算机学会(CCF)公告推出 CSP 非专业级别的能力认证(CSP，Certified Software Professional，软件能力认证)。CCF 于 2014 年推出 CSP 认证，以评价计算机专业人士或准专业人士计算机科学的基础能力，即算法和编程能力。这是继通知暂停全国青少年信息学奥林匹克联赛NOIP(普及组及提高组)之后，中国计算机学会推出非专业级软件能力认证。据介...
CCF —— CSP认证
轱辘不方
08-29 2万+
1.认证知识要求：      考试内容主要覆盖大学计算机专业所学习的程序设计、数据结构以及算法，以及相关的数学基础知识。包括但不限于：   (1)程序设计基础   逻辑与数学运算，分支循环，过程调用(递归)，字符串操作，文件操作等。   (2)数据结构   线性表（数组、队列、栈、链表）、树（堆、排序二叉树）、哈希表、集合与映射、图。   (3)算法与算法设计策略   排序与查找，枚
csp/pat是什么？各高校看重吗？
Baoyan_cs的博客
05-31 1万+
那么，同样是计算机类考试，它们有什么区别呢？能够利用经典算法思想解决较难的算法问题，如动态规划、计算几何、图论高级应用（包括最大流/最小割，强连通分支、最近公共祖先、最小生成树、欧拉序列）等，并灵活运用；排序与查找，枚举，贪心策略，分治策略，递推与递归，动态规划，搜索，图论算法，计算几何，字符串匹配、线段树、随机算法，近似算法等。，参与的联盟承诺优先录用pat成绩优良的学生，并免除招聘时与考查程序设计能力相关的笔试环节，这对于未来求职非常有帮助。不过，pat的含金量很高，仍然是一个很值得参与的考试。
csp计算机专业,中国计算机学会推出CSP非专业级别认证
weixin_35942549的博客
06-16 1332
原标题：中国计算机学会推出CSP非专业级别认证23 日，中国计算机学会(CCF)公告(CSP，Certified Software Professional，软件能力认证)。CCF 于 2014 年推出 CSP 认证，以评价计算机专业人士或准专业人士计算机科学的基础能力，即算法和编程能力。 据介绍，该认证已经成为一些企业与许多大学评价计算机专业大学生专业能力的重要工具。CCF 介绍，现在新推出的非...
CCF csp认证 小白必看
geekchen的博客
09-22 4079
c++支持到C++17(还是更高?所以学一些封装好的函数功能是必要的---比如STL里的函数；因为可携带纸质资料，建议打印带入，需要时可翻阅。【题目概述:】
2024 CCF举办关于CSP-J/S的通知
wx_cyf1333888的博客
08-28 1361
非专业级别能力认证CSP-J/S分两个级别，分别为CSP-J（入门级，Junior）和CSP-S（提高级，Senior），均涉及算法和编程。如需调整CSP-J/S认证点设置，须由各省认证组织单位报CCF批准，未经批准的认证点，其认证成绩不予承认。1.参加CSP-J/S第二轮必须先参加相应组别的第一轮认证，达到各省一定分数线方可具备参加第二轮的资格。即日起进行CSP-J/S2024第一轮注册报名，详情请见《CSP-J/S2024第一轮报名通知》（认证点由CCF授权的CSP-J/S非专业级别认证组织单位设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小灰灰搞电子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值