Slint 弹窗开发完整指南10 行搞定模态对话框与提示窗【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint弹个删除确认框自己写遮罩、按钮行、关闭逻辑怎么也得一百行起。Slint 是声明式 GUI 工具包它把模态对话框做成一个一行show()的组件提示窗压进一个 Timer。读完这篇你能直接拿走一个 20 行确认框、几处即用配置外加三个最常踩的坑。先看下效果这是 Slint 仓库自带的 Material 组件库画廊页本文要讲的对话框与提示窗组件都出自同一套库。3 分钟最小上手20 行跑通 Slint 模态对话框原理先放一边跑起来再说。思路就三步声明一个 Dialog 实例把确认、取消逻辑挂到回调上按钮里调show()。// demo.slintimport 路径按你 material 库的位置写 import { Dialog, MaterialText, FilledButton } from material.slint; export component DeleteConfirm inherits Window { width: 400px; height: 280px; confirm : Dialog { width: 100%; height: 100%; title: 删除确认; default_action_text: 删除; actions: [取消]; MaterialText { text: 删除后无法恢复确定; } default_action_clicked { confirm.close(); } // 主按钮关窗 action_clicked(index) { confirm.close(); } // 取消直接关 } FilledButton { text: 删除文件; clicked { confirm.show(); } // 一行弹出模态对话框 } }三行关键代码值得拆开看。width: 100%; height: 100%;让弹窗盖住整个窗口里面的卡片会自动居中。default_action_clicked是主按钮回调action_clicked(index)给每个取消报序号。按钮只负责confirm.show()。这就是 Slint Dialog 用法的全部主干——遮罩、按钮行、关闭逻辑一行都不用你手写。Slint Dialog 用法弹窗要不要挡住主界面close_policy阻断行为的开关material 库的 Dialog 源码dialog.slint开头就写着close_policy: no_auto_close;。再叠加底层的Modal遮罩见 modal.slint点背景毫无反应用户只能选按钮——这就是模态。想让背景可点、点外面就关用内置 PopupWindow 的close_policy属性可选值有close_on_click_outside点外面关闭和no_auto_close不自动关闭默认是点一下自己就关。✅ 选型标准一句话删不掉后悔的操作删除、支付必须阻断纯通知类不要阻断。决策场景阻断主界面建议组件关闭方式删除文件、支付确认要Dialog只能显式点按钮保存成功、任务完成不要SnackBar3 秒 Timer 自动消失弱网、低电量提醒随意SnackBar 加操作按钮自动消失或点重试关闭按钮多到一行放不下怎么办别手动摆一排 TextButton。BaseDialog基础实现已经排好左边放图标按钮右边一行文字按钮加主按钮中间自动留白。你只管把actions传成数组比如actions: [预览, 备份, 彻底删除];按钮按序循环生成。真要全屏放大量按钮同文件还导出了FullscreenDialog按钮行挪到顶栏内容区整块可用。Slint 提示窗自动消失配置3 秒 Timer3 秒自动消失一个 Timer 的事material 库的SnackBar源码snack_bar.slint自动出现在窗口底部但故意不做自动消失——真实项目往往想留撤销机会。所以补一个 Timer把running绑到is-open上snackbar : SnackBar { width: 100%; height: 100%; text: 已保存成功; action_text: 撤销; action_clicked { snackbar.close(); } } Timer { interval: 3000ms; running: snackbar.is-open; // 弹窗打开时才开始计时 triggered { snackbar.close(); } }show()之后is-open自动变 trueTimer 开跑close()后自动停。下次弹重新计时不用手动复位。全局单例防堆叠每个页面各放一个 SnackBar迟早撞上两个提示叠一起。规矩很简单整个窗口只放一个提示窗实例业务代码只改数据。export global Notice { in property string text; } // 顶层窗口里唯一的提示窗实例 入口函数 snackbar : SnackBar { width: 100%; height: 100%; text: Notice.text; action_clicked { snackbar.close(); } } function toast(msg: string) { Notice.text msg; snackbar.show(); }业务模块想弹提示走顶层这个toast()函数别自己 new 实例。单一出口自然不堆叠。这里建议用这个顶层统一持有而不是各组件属性轮询因为实例只有一份状态不用同步。弹窗组合技动画、键盘与响应式尺寸这三样大多不用你写动画卡片opacity从 0 起打开后 50ms 的 Timer 把它翻到 1animate opacity声明负责补间。键盘BaseDialog内置 FocusScopeEnter 触发默认操作Escape 关窗一行键处理都不用写。响应式卡片尺寸跟内容走layout.min_width窗口内自动居中文字担心过宽给MaterialText加max_width封顶。自己写提示窗时把50ms Timer 翻 opacity animate这套动画模式抄过来就行// 轻量提示窗淡入 3 秒自动消失 export component LightTip inherits PopupWindow { close_policy: no_auto_close; card : Rectangle { width: 260px; background: #444; opacity: 0; animate opacity { duration: 200ms; } Text { text: 任务完成; color: white; } } Timer { interval: 50ms; triggered { card.opacity 1; self.running false; } // 首帧翻 opacity } Timer { interval: 3000ms; triggered { root.close(); } // 3 秒后自动消失 } }这跟 material Dialog 的动画是同一套路先藏后翻声明补间两个 Timer 各管各的。最后看个真实应用。这是用 Slint 做的天气预报 Demo它里面的提示与弹窗都出自前文的模式。弹窗开发避坑清单焦点、动画与堆叠⚠️坑一弹窗里的输入框抢不到焦点现象弹窗打开后键盘没反应焦点还在主界面的输入框里。 原因弹窗没接管焦点按键事件仍发给父窗口。 解法material 的 Dialog 用forward_focus指向内部 FocusScope 解决自定义弹窗时把内容包进 FocusScope再把焦点转发给弹窗根节点。⚠️坑二第二次弹出时遮罩不暗、卡片跳出来现象关掉再弹遮罩没变灰或者卡片直接硬切。 原因关闭回调里把 opacity、状态复位了可淡入动画还没跑完。 解法关闭回调别碰动画属性状态变更放到动画结束之后。material 特意用 50ms Timer 延迟翻背景就是防这个。⚠️坑三两个 Toast 叠在一起现象两个业务模块同时弹提示互相遮挡。 原因各自持有 PopupWindow弹出时机没人管。 解法全窗口只留一个提示窗实例前面全局单例那节上一个close()之后才 show 下一个。Slint 弹窗的设计就一句话弹窗也是组件声明一次状态管显隐。下一步去仓库ui-libraries/material/examples/gallery目录打开actions_view.slint那是 Dialog、SnackBar、底部弹窗的官方示例可以照着直接跑。【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Slint 弹窗开发完整指南：10 行搞定模态对话框与提示窗
Slint 弹窗开发完整指南10 行搞定模态对话框与提示窗【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint弹个删除确认框自己写遮罩、按钮行、关闭逻辑怎么也得一百行起。Slint 是声明式 GUI 工具包它把模态对话框做成一个一行show()的组件提示窗压进一个 Timer。读完这篇你能直接拿走一个 20 行确认框、几处即用配置外加三个最常踩的坑。先看下效果这是 Slint 仓库自带的 Material 组件库画廊页本文要讲的对话框与提示窗组件都出自同一套库。3 分钟最小上手20 行跑通 Slint 模态对话框原理先放一边跑起来再说。思路就三步声明一个 Dialog 实例把确认、取消逻辑挂到回调上按钮里调show()。// demo.slintimport 路径按你 material 库的位置写 import { Dialog, MaterialText, FilledButton } from material.slint; export component DeleteConfirm inherits Window { width: 400px; height: 280px; confirm : Dialog { width: 100%; height: 100%; title: 删除确认; default_action_text: 删除; actions: [取消]; MaterialText { text: 删除后无法恢复确定; } default_action_clicked { confirm.close(); } // 主按钮关窗 action_clicked(index) { confirm.close(); } // 取消直接关 } FilledButton { text: 删除文件; clicked { confirm.show(); } // 一行弹出模态对话框 } }三行关键代码值得拆开看。width: 100%; height: 100%;让弹窗盖住整个窗口里面的卡片会自动居中。default_action_clicked是主按钮回调action_clicked(index)给每个取消报序号。按钮只负责confirm.show()。这就是 Slint Dialog 用法的全部主干——遮罩、按钮行、关闭逻辑一行都不用你手写。Slint Dialog 用法弹窗要不要挡住主界面close_policy阻断行为的开关material 库的 Dialog 源码dialog.slint开头就写着close_policy: no_auto_close;。再叠加底层的Modal遮罩见 modal.slint点背景毫无反应用户只能选按钮——这就是模态。想让背景可点、点外面就关用内置 PopupWindow 的close_policy属性可选值有close_on_click_outside点外面关闭和no_auto_close不自动关闭默认是点一下自己就关。✅ 选型标准一句话删不掉后悔的操作删除、支付必须阻断纯通知类不要阻断。决策场景阻断主界面建议组件关闭方式删除文件、支付确认要Dialog只能显式点按钮保存成功、任务完成不要SnackBar3 秒 Timer 自动消失弱网、低电量提醒随意SnackBar 加操作按钮自动消失或点重试关闭按钮多到一行放不下怎么办别手动摆一排 TextButton。BaseDialog基础实现已经排好左边放图标按钮右边一行文字按钮加主按钮中间自动留白。你只管把actions传成数组比如actions: [预览, 备份, 彻底删除];按钮按序循环生成。真要全屏放大量按钮同文件还导出了FullscreenDialog按钮行挪到顶栏内容区整块可用。Slint 提示窗自动消失配置3 秒 Timer3 秒自动消失一个 Timer 的事material 库的SnackBar源码snack_bar.slint自动出现在窗口底部但故意不做自动消失——真实项目往往想留撤销机会。所以补一个 Timer把running绑到is-open上snackbar : SnackBar { width: 100%; height: 100%; text: 已保存成功; action_text: 撤销; action_clicked { snackbar.close(); } } Timer { interval: 3000ms; running: snackbar.is-open; // 弹窗打开时才开始计时 triggered { snackbar.close(); } }show()之后is-open自动变 trueTimer 开跑close()后自动停。下次弹重新计时不用手动复位。全局单例防堆叠每个页面各放一个 SnackBar迟早撞上两个提示叠一起。规矩很简单整个窗口只放一个提示窗实例业务代码只改数据。export global Notice { in property string text; } // 顶层窗口里唯一的提示窗实例 入口函数 snackbar : SnackBar { width: 100%; height: 100%; text: Notice.text; action_clicked { snackbar.close(); } } function toast(msg: string) { Notice.text msg; snackbar.show(); }业务模块想弹提示走顶层这个toast()函数别自己 new 实例。单一出口自然不堆叠。这里建议用这个顶层统一持有而不是各组件属性轮询因为实例只有一份状态不用同步。弹窗组合技动画、键盘与响应式尺寸这三样大多不用你写动画卡片opacity从 0 起打开后 50ms 的 Timer 把它翻到 1animate opacity声明负责补间。键盘BaseDialog内置 FocusScopeEnter 触发默认操作Escape 关窗一行键处理都不用写。响应式卡片尺寸跟内容走layout.min_width窗口内自动居中文字担心过宽给MaterialText加max_width封顶。自己写提示窗时把50ms Timer 翻 opacity animate这套动画模式抄过来就行// 轻量提示窗淡入 3 秒自动消失 export component LightTip inherits PopupWindow { close_policy: no_auto_close; card : Rectangle { width: 260px; background: #444; opacity: 0; animate opacity { duration: 200ms; } Text { text: 任务完成; color: white; } } Timer { interval: 50ms; triggered { card.opacity 1; self.running false; } // 首帧翻 opacity } Timer { interval: 3000ms; triggered { root.close(); } // 3 秒后自动消失 } }这跟 material Dialog 的动画是同一套路先藏后翻声明补间两个 Timer 各管各的。最后看个真实应用。这是用 Slint 做的天气预报 Demo它里面的提示与弹窗都出自前文的模式。弹窗开发避坑清单焦点、动画与堆叠⚠️坑一弹窗里的输入框抢不到焦点现象弹窗打开后键盘没反应焦点还在主界面的输入框里。 原因弹窗没接管焦点按键事件仍发给父窗口。 解法material 的 Dialog 用forward_focus指向内部 FocusScope 解决自定义弹窗时把内容包进 FocusScope再把焦点转发给弹窗根节点。⚠️坑二第二次弹出时遮罩不暗、卡片跳出来现象关掉再弹遮罩没变灰或者卡片直接硬切。 原因关闭回调里把 opacity、状态复位了可淡入动画还没跑完。 解法关闭回调别碰动画属性状态变更放到动画结束之后。material 特意用 50ms Timer 延迟翻背景就是防这个。⚠️坑三两个 Toast 叠在一起现象两个业务模块同时弹提示互相遮挡。 原因各自持有 PopupWindow弹出时机没人管。 解法全窗口只留一个提示窗实例前面全局单例那节上一个close()之后才 show 下一个。Slint 弹窗的设计就一句话弹窗也是组件声明一次状态管显隐。下一步去仓库ui-libraries/material/examples/gallery目录打开actions_view.slint那是 Dialog、SnackBar、底部弹窗的官方示例可以照着直接跑。【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考