UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载导读SettingsLayout是 SukiUI面向 AvaloniaUI 的 UI 主题库提供的一个专用于「设置页」场景的响应式布局控件它将一组带标题的设置分组SettingsLayoutItem展示为左侧导航摘要 右侧内容区的经典设置页形态并会随窗口宽度自动在「双栏模式」与「单栏堆叠模式」之间切换。读完本文你将掌握如何用 XAML 声明式地搭建分组设置页面、理解其响应式阈值与摘要栏宽度等关键参数并能基于源码了解它内部的自适应与平滑滚动机制直接复用到自己的 Avalonia 项目中。一、SettingsLayout 是什么SettingsLayout定义在 SukiUI/Controls/Settings/SettingsLayout.axaml.cs是一个继承自UserControl的布局容器控件。它的设计目标非常明确把「设置」这一高频界面形态封装成一个开箱即用的控件并让它随窗口宽度自动调整布局。其核心特征可以概括为三点分组内容展示通过Items集合承载任意数量的SettingsLayoutItem每个SettingsLayoutItem都有独立的Header标题与Content任意控件内容对应设置页里的一个分组。左侧摘要导航每个分组的标题会同时以RadioButton样式类MenuChip的形式出现在左侧摘要栏中点击即可平滑滚动定位到对应分组。响应式自适应当容器宽度低于阈值时左侧摘要栏会自动收起宽度动画过渡到 0整个页面退化为单一内容列的堆叠形态宽度恢复后摘要栏再次展开。从模板结构SettingsLayout.axaml可以看到它的内部骨架是一个DockPanelDockPanel MaxWidth1400 SizeChangedDockPanel_SizeChanged StackPanel NameStackSummary ... DockPanel.DockLeft / ScrollViewer NameMyScroll ClassesStack StackPanel NameStackItems ... / /ScrollViewer /DockPanel其中StackSummary是左侧摘要导航栏MyScroll/StackItems是右侧内容滚动区StackPanelExtensions.AnimatedScroll为其启用平滑滚动。也就是说整个控件在运行期会由代码动态地把Items渲染成这两部分。二、快速上手最小可用示例原文档给出的最小示例非常直接在SettingsLayout的Items中放一个ObservableCollectionSettingsLayoutItem每个SettingsLayoutItem用Header定义标题、用Content定义分组内容suki:SettingsLayout suki:SettingsLayout.Items objectModel:ObservableCollection x:TypeArgumentssuki:SettingsLayoutItem suki:SettingsLayoutItem HeaderSettings Part1 suki:SettingsLayoutItem.Content Border BackgroundLightGray Height300 / /suki:SettingsLayoutItem.Content /suki:SettingsLayoutItem suki:SettingsLayoutItem HeaderSettings Part 2 suki:SettingsLayoutItem.Content Border BackgroundLightGray Height300 / /suki:SettingsLayoutItem.Content /suki:SettingsLayoutItem suki:SettingsLayoutItem HeaderSettings Part 3 suki:SettingsLayoutItem.Content Border BackgroundLightGray Height300 / /suki:SettingsLayoutItem.Content /suki:SettingsLayoutItem /objectModel:ObservableCollection /suki:SettingsLayout.Items /suki:SettingsLayout要点说明使用前需在 XAML 根节点声明命名空间xmlns:sukihttps://github.com/kikipoulet/SukiUI与xmlns:objectModelclr-namespace:System.Collections.ObjectModel;assemblySystem.Collections示例中objectModel:ObservableCollection即System.Collections.ObjectModel.ObservableCollectionT。每个SettingsLayoutItem.Content可放置任意 Avalonia 控件Border、StackPanel、GlassCard、ItemsControl等因此完全可以用原生 XAML 组合出复杂设置表单。ObservableCollection的增删会被控件监听SettingsLayout在源码中通过AttachItemsCollection()把Items转型为INotifyCollectionChanged并订阅CollectionChanged事件集合变化时自动调用UpdateItems()重建界面见 SettingsLayout.axaml.cs。也就是说运行时动态增删设置分组也会被实时反映。三、把设置分组放进资源ItemsSource 绑定写法除了直接在Items内联集合更符合 MVVM 习惯的做法是把SettingsLayoutItem集合放进UserControl.Resources作为静态资源再通过Items{StaticResource ...}绑定。SukiUI 官方 Demo 的主题设置页正是这样组织的参见 SukiUI.Demo/Features/Theming/ThemingView.axamlUserControl.Resources generic:List x:KeyCollection x:TypeArgumentssuki:SettingsLayoutItem suki:SettingsLayoutItem HeaderBase Theme suki:SettingsLayoutItem.Content StackPanel OrientationHorizontal Spacing20 !-- 亮色/暗色主题切换的 RadioButton 卡片 -- /StackPanel /suki:SettingsLayoutItem.Content /suki:SettingsLayoutItem suki:SettingsLayoutItem HeaderColor Theme suki:SettingsLayoutItem.Content ItemsControl ItemsSource{Binding AvailableColors} !-- 色板选择 -- /ItemsControl /suki:SettingsLayoutItem.Content /suki:SettingsLayoutItem suki:SettingsLayoutItem HeaderBackground suki:SettingsLayoutItem.Content StackPanel !-- 背景动画、过渡与自定义 Shader 开关 -- /StackPanel /suki:SettingsLayoutItem.Content /suki:SettingsLayoutItem /generic:List /UserControl.Resources suki:SukiStackPage Margin20 suki:SukiStackPage.Content suki:SettingsLayout NameTheming Items{StaticResource Collection} / /suki:SukiStackPage.Content /suki:SukiStackPage该页面背后的视图模型 ThemingViewModel.cs 展示了典型的配套写法IsLightTheme、BackgroundStyle、BackgroundAnimations等可观察属性通过CommunityToolkit.Mvvm的[ObservableProperty]定义主题切换命令ChangeBaseTheme、ChangeColorTheme则直接调用SukiTheme.GetInstance()的实例方法。这一组合就是「SettingsLayout MVVM 绑定」的完整范例。四、响应式行为摘要栏如何随窗口宽度变化原文档用一句话概括了它的核心能力will update with the width of the window随窗口宽度更新。这个「更新」的实质是左侧摘要栏在超过阈值时展开、低于阈值时收起的双栏/单栏切换。相关逻辑位于 SettingsLayout.axaml.cs 的DockPanel_SizeChangedvar desiredSize e.NewSize.Width MinWidthWhetherStackSummaryShow ? StackSummaryWidth : 0;即当SettingsLayout实际宽度大于MinWidthWhetherStackSummaryShow时摘要栏宽度为目标值StackSummaryWidth否则宽度为 0即隐藏摘要栏内容区占满整行。宽度切换时控件会调用stack.Animatedouble(WidthProperty, ...)用 800ms 的动画平滑过渡而不是生硬跳变。4.1 关键参数MinWidthWhetherStackSummaryShow默认值 1100像素源码中属性注册时指定1100为默认值。语义设置页宽度小于该值时不显示左侧摘要导航页面退化为单栏堆叠。约束可配置的最小值为1设置时若传入小于 1 的值会被直接忽略见 SettingsLayout.axaml.cs。适用场景如果你的设置项较少、不需要摘要导航可以把这个阈值调大让页面在更宽的窗口下也保持单栏反之对于宽屏应用可调小阈值让双栏布局更早出现。4.2 关键参数StackSummaryWidth默认值 400像素。语义双栏模式下左侧摘要导航栏的宽度。约束可配置的最小值为0传入负数会被忽略见 SettingsLayout.axaml.cs。这两个属性都是可直接在 XAML 中赋值的公开属性suki:SettingsLayout MinWidthWhetherStackSummaryShow900 StackSummaryWidth320 ... /suki:SettingsLayout五、源码级机制分组渲染、摘要导航与自动高亮UpdateItems()SettingsLayout.axaml.cs负责把Items渲染为左右两栏其内部逻辑能帮助我们理解控件的完整行为跳过无标题分组if (settingsLayoutItem.Header is null) continue;——没有Header的SettingsLayoutItem不会出现在任何一栏中。右侧内容区每个分组被包装为一个GroupBoxHeader绑定为该项的Header文本Content放入带Margin new Thickness(35, 12)的Border内容宿主GroupBox再放进_stackItems。分组之间以 10×20 的Margin和顶部的 8px 占位Border分隔。左侧摘要区每个分组的标题同时生成一个RadioButtonClasses { MenuChip }加入_stackSummary点击时通过AnimateScroll(x.Value.Y)把右侧ScrollViewer平滑滚动到对应分组的位置动画时长 800ms、缓动曲线为CubicEaseInOut见 AnimateScroll。滚动目标点会额外上移 30pxdesiredScroll - 30避免分组顶部被遮挡。滚动联动高亮MyScrollOnScrollChanged在用户滚动右侧内容时计算每个分组相对_stackItems的 Y 坐标与当前滚动偏移的距离找出最近的nearestDistance分组并把左侧对应RadioButton的IsChecked置为true见 SettingsLayout.axaml.cs。这就是「右侧滚动时左侧摘要自动跟随高亮」的交互来源。生命周期管理控件挂载到逻辑树OnAttachedToLogicalTree或模板应用OnApplyTemplate时会重建内容并订阅集合变化从逻辑树分离OnDetachedFromLogicalTree时会取消进行中的滚动动画、退订事件避免内存泄漏。5.1 MenuChip 摘要项的视觉样式左侧摘要RadioButton的MenuChip样式定义在 SukiUI/Theme/SettingsLayoutStyles.axaml包含一组状态相关的细节默认态透明背景、无边框、左侧带一个Opacity0的Ellipse指示点5×5颜色取SukiPrimaryColor并配有 0.4s 的Margin过渡。:checked选中态指示点Opacity过渡到 1、文字加粗DefaultDemiBold、背景变为SukiPrimaryColor10、边框与前景切换为主题主色SukiPrimaryColor配合 0.15s0.3s 的BrushTransition/DoubleTransition动画。:pointerover悬停态背景变为SukiLightBackground。这套样式意味着摘要栏的选中/悬停反馈全部由主题资源驱动在 SukiUI 的亮色与暗色主题下会自动适配。5.2 移动端 / 触屏适配ClassesTouchSettingsLayout内置了对触屏样式的支持当在控件上添加ClassesTouch时UpdateItems()会同步给每个GroupBox加上Touch样式类if (Classes.Contains(Touch)) gb.Classes.Add(Touch);而 SukiUI/Theme/TouchStyles/TouchStyles.axaml 中定义了suki|GroupBox.Touch的专属模板大圆角、更适合触控的布局摘要栏MenuChip也配套提供了 SettingsLayoutMenuChipStyles.axaml。Demo 的触屏示例AllControlsView.axaml正是这样使用的suki:SettingsLayout Margin0,25,0,0 ClassesTouch suki:SettingsLayout.Items objectModel:ObservableCollection x:TypeArgumentssuki:SettingsLayoutItem suki:SettingsLayoutItem HeaderInformations !-- 点击编辑、输入框等触控友好的设置项 -- /suki:SettingsLayoutItem !-- 更多分组... -- /objectModel:ObservableCollection /suki:SettingsLayout.Items /suki:SettingsLayout六、总结SettingsLayout把「左侧摘要 右侧分组内容」这一设置页范式封装成了声明式控件快速搭建在Items中声明ObservableCollectionSettingsLayoutItem为每个分组设置Header与Content即可内容区支持任意 Avalonia 控件响应式自适应由MinWidthWhetherStackSummaryShow默认 1100与StackSummaryWidth默认 400两个参数控制双栏/单栏切换宽度变化时以 800ms 动画平滑过渡交互完整左侧摘要点击可平滑滚动定位、右侧滚动自动联动高亮ObservableCollection的运行时增删也会实时反映场景扩展支持ClassesTouch触屏适配官方 DemoThemingView.axaml提供了与 MVVM 绑定的完整参考实现。如需深入源码建议从 SettingsLayout.axaml.cs响应式与渲染逻辑、SettingsLayoutItem.cs分组数据模型与 SettingsLayoutStyles.axaml摘要栏样式三个文件入手。赞分享UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载相关推荐10分钟掌握Elementor响应式设计从零开始构建自适应网站的完整指南10分钟掌握Elementor响应式设计从零开始构建自适应网站的完整指南 Elementor是一款功能强大的前端拖放页面构建器能够帮助用户以最快速度创建高端CMS前端后端低代码构建响应式布局gh_mirrors/ui2/ui自适应界面设计构建响应式布局gh_mirrors/ui2/ui自适应界面设计 你是否还在为Go语言GUI应用的跨平台界面适配烦恼本文将带你使用gh_mirrors/ui2桌面应用UI组件跨平台CUA布局配置响应式文档站点的页面布局设计CUA布局配置响应式文档站点的页面布局设计 引言为什么响应式布局对技术文档至关重要 在当今多设备访问的时代技术文档的阅读体验直接影响开发者对项目的理解和采人工智能AI Agent大模型GUI 自动化MCP 服务模型评测微调强化学习工具调用上一篇BiliDownloader基于.NET 9的B站视频下载架构设计与实现深度解析下一篇Argos Translate3 条命令搭好离线翻译环境——完整免费指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考