为什么你的 Toast 不该用对话框渲染AestheticDialogs 非模态通知横幅正确姿势【免费下载链接】AestheticDialogs An Android Library built with Jetpack Compose for fluid, beautiful, custom Dialogs.项目地址: https://gitcode.com/gh_mirrors/ae/AestheticDialogsAestheticDialogs 是一款基于 Jetpack Compose 的 Android 对话框与通知横幅组件库。如果你正用模态对话框来渲染一条 保存成功 之类的 Toast这篇文章会告诉你三个正在伤害用户体验的副作用并给出非模态通知横幅的正确接入姿势——从 5 种样式选择到自动消失与退场动效一次讲清。用模态对话框渲染 Toast 的 3 个副作用把一条信息性 Toast 塞进对话框Dialog等于开了一扇窗口。它看起来只是多了个弹窗实际代价有三屏幕被遮罩压暗—— 模态对话框自带 scrim半透明遮罩用户会瞬间误以为出了大事焦点被抢走—— 键盘焦点和 TalkBack 焦点都被对话框吸走屏幕阅读器用户直接迷失返回手势被吞掉—— 一次轻扫本可继续浏览却被对话框拦截。看下面这张 Feedback 模态对话框的截图整块屏幕被灰色遮罩压暗——这就是信息通知不该有的阵仗AestheticDialogs 在 2.x 中把这五类边置通知Toaster、Rainbow、Connectify、Emoji、Emotion全部从对话框中剥离改为非模态横幅Banner不开窗口、不抢焦点、不挡输入。非模态通知横幅长什么样5 种变体横幅没有遮罩、不抢焦点整条横幅是一个 Live Region。5 种剪影各管一摊场景源码定义见aestheticdialogs/src/main/java/com/thecode/aestheticdialogs/components/notification/models/NotificationUiModel.kt变体外观适用场景Toaster卡片 前缘色调条默认款安静地确认已保存Rainbow整卡填充色调、反白文字最醒目的一条慎用Connectify居中卡片 顶部渐变条网络、同步等环境状态Emoji大号 emoji 替代图标里程碑、连胜等轻快语气Emotion渐变卡片 时间戳来自人的消息、照片下面是 Toaster 变体在浅色与深色主题下的真实渲染效果——注意屏幕没有任何遮罩正确姿势两种接入方式核心入口都写在aestheticdialogs/src/main/java/com/thecode/aestheticdialogs/components/notification/AestheticNotification.kt里按你的布局二选一AestheticNotification—— 你已经有固定位置比如内容区上方的一列、自己 Scaffold 的一个 slot直接渲染横幅本身AestheticNotificationHost—— 想让横幅浮在屏幕边缘、自带进出场动画把它放在页面根Box的最后一个子节点即可Box(Modifier.fillMaxSize()) { HomeContent() AestheticNotificationHost( notification uiState.banner, // null 即关闭横幅 onSignal { viewModel.dismissBanner() }, alignment NotificationAlignment.Top, animation AestheticNotificationAnimation.Slide, autoDismissMillis 4_000, ) }它的契约是无状态的和库里所有对话框一致横幅是否显示由你的状态决定设回null就关闭库从不替你关关闭按钮和自动消失超时都只发出Dismissed信号由你决定后续动作autoDismissMillis计时器在新横幅出现时自动重启。这套行为有专门的交互测试兜底见aestheticdialogs/src/test/java/com/thecode/aestheticdialogs/NotificationHostTest.kt。横幅独有的退场动效为什么只有它有这是很多人好奇的一点模态对话框只有入场动画横幅却拥有完整的入场 退场动画。原因写在架构文档 docs/ARCHITECTURE.md 的状态归属表里——退场动画要求组件在你已经判定它消失之后继续持有画面横幅宿主保留最后一条横幅纯粹是为了画完滑出过程属于纯展示状态而模态对话框若也这么做库就要接管可见性违背整个无状态设计。横幅支持 5 种动效定义于aestheticdialogs/src/main/java/com/thecode/aestheticdialogs/tokens/AestheticMotion.kt动效效果Slide默认从锚定的边缘滑入滑出Fade原地淡入淡出最安静Scale从 92% 放大 淡入SlideHorizontal从起始边缘横滑None无过渡更贴心的是当用户在系统辅助功能里关掉动画时所有过渡会直接折叠为硬切而不是缩短的动画——这才是减少动态效果设置真正想要的行为。无障碍不是加分项Live Region 自动播报横幅底层是BannerPrimitiveaestheticdialogs/src/main/java/com/thecode/aestheticdialogs/primitives/BannerPrimitive.kt整条横幅就是一个Live Region错误语气Error用 Assertive——立刻打断朗读其余语气用 Polite——等当前朗读停顿再播报每个色调的标题色在明暗两套主题下都通过4.5:1 对比度色弱用户同样读得清每种语气还带一个独立绘制的图形标记意义从不只靠颜色传达。对屏幕阅读器用户来说通知出现了不需要他去翻找对明眼开发者来说这些决策库已经替你做好。一句话总结需要用户决策的用模态对话框确认、输入、警告只需告知的用非模态横幅Toast、同步状态、里程碑。AestheticDialogs 把这层判断做成了架构约束五种横幅变体共享一个BannerPrimitive一个无状态宿主搞定浮层、自动消失与退场动效。下次再想给 Toast 套上对话框时记得看看AestheticNotificationHost的正确姿势——你的用户屏幕会感谢你的。【免费下载链接】AestheticDialogs An Android Library built with Jetpack Compose for fluid, beautiful, custom Dialogs.项目地址: https://gitcode.com/gh_mirrors/ae/AestheticDialogs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 为什么你的 Toast 不该用对话框渲染？AestheticDialogs 非模态通知横幅正确姿势
为什么你的 Toast 不该用对话框渲染AestheticDialogs 非模态通知横幅正确姿势【免费下载链接】AestheticDialogs An Android Library built with Jetpack Compose for fluid, beautiful, custom Dialogs.项目地址: https://gitcode.com/gh_mirrors/ae/AestheticDialogsAestheticDialogs 是一款基于 Jetpack Compose 的 Android 对话框与通知横幅组件库。如果你正用模态对话框来渲染一条 保存成功 之类的 Toast这篇文章会告诉你三个正在伤害用户体验的副作用并给出非模态通知横幅的正确接入姿势——从 5 种样式选择到自动消失与退场动效一次讲清。用模态对话框渲染 Toast 的 3 个副作用把一条信息性 Toast 塞进对话框Dialog等于开了一扇窗口。它看起来只是多了个弹窗实际代价有三屏幕被遮罩压暗—— 模态对话框自带 scrim半透明遮罩用户会瞬间误以为出了大事焦点被抢走—— 键盘焦点和 TalkBack 焦点都被对话框吸走屏幕阅读器用户直接迷失返回手势被吞掉—— 一次轻扫本可继续浏览却被对话框拦截。看下面这张 Feedback 模态对话框的截图整块屏幕被灰色遮罩压暗——这就是信息通知不该有的阵仗AestheticDialogs 在 2.x 中把这五类边置通知Toaster、Rainbow、Connectify、Emoji、Emotion全部从对话框中剥离改为非模态横幅Banner不开窗口、不抢焦点、不挡输入。非模态通知横幅长什么样5 种变体横幅没有遮罩、不抢焦点整条横幅是一个 Live Region。5 种剪影各管一摊场景源码定义见aestheticdialogs/src/main/java/com/thecode/aestheticdialogs/components/notification/models/NotificationUiModel.kt变体外观适用场景Toaster卡片 前缘色调条默认款安静地确认已保存Rainbow整卡填充色调、反白文字最醒目的一条慎用Connectify居中卡片 顶部渐变条网络、同步等环境状态Emoji大号 emoji 替代图标里程碑、连胜等轻快语气Emotion渐变卡片 时间戳来自人的消息、照片下面是 Toaster 变体在浅色与深色主题下的真实渲染效果——注意屏幕没有任何遮罩正确姿势两种接入方式核心入口都写在aestheticdialogs/src/main/java/com/thecode/aestheticdialogs/components/notification/AestheticNotification.kt里按你的布局二选一AestheticNotification—— 你已经有固定位置比如内容区上方的一列、自己 Scaffold 的一个 slot直接渲染横幅本身AestheticNotificationHost—— 想让横幅浮在屏幕边缘、自带进出场动画把它放在页面根Box的最后一个子节点即可Box(Modifier.fillMaxSize()) { HomeContent() AestheticNotificationHost( notification uiState.banner, // null 即关闭横幅 onSignal { viewModel.dismissBanner() }, alignment NotificationAlignment.Top, animation AestheticNotificationAnimation.Slide, autoDismissMillis 4_000, ) }它的契约是无状态的和库里所有对话框一致横幅是否显示由你的状态决定设回null就关闭库从不替你关关闭按钮和自动消失超时都只发出Dismissed信号由你决定后续动作autoDismissMillis计时器在新横幅出现时自动重启。这套行为有专门的交互测试兜底见aestheticdialogs/src/test/java/com/thecode/aestheticdialogs/NotificationHostTest.kt。横幅独有的退场动效为什么只有它有这是很多人好奇的一点模态对话框只有入场动画横幅却拥有完整的入场 退场动画。原因写在架构文档 docs/ARCHITECTURE.md 的状态归属表里——退场动画要求组件在你已经判定它消失之后继续持有画面横幅宿主保留最后一条横幅纯粹是为了画完滑出过程属于纯展示状态而模态对话框若也这么做库就要接管可见性违背整个无状态设计。横幅支持 5 种动效定义于aestheticdialogs/src/main/java/com/thecode/aestheticdialogs/tokens/AestheticMotion.kt动效效果Slide默认从锚定的边缘滑入滑出Fade原地淡入淡出最安静Scale从 92% 放大 淡入SlideHorizontal从起始边缘横滑None无过渡更贴心的是当用户在系统辅助功能里关掉动画时所有过渡会直接折叠为硬切而不是缩短的动画——这才是减少动态效果设置真正想要的行为。无障碍不是加分项Live Region 自动播报横幅底层是BannerPrimitiveaestheticdialogs/src/main/java/com/thecode/aestheticdialogs/primitives/BannerPrimitive.kt整条横幅就是一个Live Region错误语气Error用 Assertive——立刻打断朗读其余语气用 Polite——等当前朗读停顿再播报每个色调的标题色在明暗两套主题下都通过4.5:1 对比度色弱用户同样读得清每种语气还带一个独立绘制的图形标记意义从不只靠颜色传达。对屏幕阅读器用户来说通知出现了不需要他去翻找对明眼开发者来说这些决策库已经替你做好。一句话总结需要用户决策的用模态对话框确认、输入、警告只需告知的用非模态横幅Toast、同步状态、里程碑。AestheticDialogs 把这层判断做成了架构约束五种横幅变体共享一个BannerPrimitive一个无状态宿主搞定浮层、自动消失与退场动效。下次再想给 Toast 套上对话框时记得看看AestheticNotificationHost的正确姿势——你的用户屏幕会感谢你的。【免费下载链接】AestheticDialogs An Android Library built with Jetpack Compose for fluid, beautiful, custom Dialogs.项目地址: https://gitcode.com/gh_mirrors/ae/AestheticDialogs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考