# Space 使用文档本文档介绍 AtomUI Space 控件的各种使用方式和常见场景。 > 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/Layout/SpaceShowCase.axaml` --- ## 前置准备 ### AXAML 命名空间 ```xml xmlns:atom="https://atomui.net" xmlns:antdicons="https://atomui.net/icons/antdesign" ``` ### C# 命名空间 ```csharp using AtomUI.Desktop.Controls; // Space, CompactSpace 等 using AtomUI.Controls; // SizeType, CustomizableSizeType 等共享类型 ``` --- ## 1. 基本用法水平排列子元素，默认间距为 Small（8px）： ```xml Button Click to Upload Confirm ``` **使用场景**：当一组按钮或控件需要统一间距时，用 Space 包裹即可，无需为每个子元素设置 `Margin`。 --- ## 2. 垂直排列通过 `Orientation="Vertical"` 切换为垂直方向排列。垂直模式常用于卡片列表、表单字段等场景： ```xml Card content Card content Card content Card content Card content Card content ``` --- ## 3. 三种预设尺寸通过 `SizeType` 属性设置间距大小，支持 `Small`（默认）、`Middle`、`Large` 三种预设，以及 `Custom` 自定义： ```xml Small Small Middle Middle Large Large ``` ### 动态切换尺寸配合 RadioButton 和数据绑定实现运行时动态切换（参考 Gallery "Space Size" 示例）： ```xml Small Middle Large Custom Primary Default Dashed Link ``` ```csharp // ViewModel public class SpaceViewModel : ReactiveObject { private CustomizableSizeType _sizeType; public CustomizableSizeType SizeType { get => _sizeType; set => this.RaiseAndSetIfChanged(ref _sizeType, value); } private double _customSpacingValue; public double CustomSpacingValue { get => _customSpacingValue; set => this.RaiseAndSetIfChanged(ref _customSpacingValue, value); } } ``` --- ## 4. 自定义间距直接设置 `ItemSpacing`（项目间距）和 `LineSpacing`（行间距）覆盖预设值： ```xml Button Button ``` --- ## 5. 对齐方式通过 `ItemsAlignment` 控制每行子项在交叉轴方向上的对齐方式： ```xml Text Primary Block Text Primary Block Text Primary Block ``` --- ## 6. 自动换行 Space 在水平方向空间不足时会自动换行，类似 CSS `flex-wrap: wrap`： ```xml Button Button Button Button Button Button Button Button Button Button ``` `LineSpacing` 控制换行后行与行之间的间距（此处为 16px），`ItemSpacing` 控制同一行内子项之间的间距（此处为 8px）。 --- ## 7. 带分割线通过 `SplitTemplate` 在相邻子项之间自动插入分隔控件： ```xml Link Link Link ``` 分割线模板可以是任意控件，如 `Separator`、`Divider` 或自定义 `Border`。 --- ## 8. CompactSpace 紧凑组合 ### 表单控件组合将多个表单控件紧密排列，去除间距并共享边框： ```xml Submit ``` ### 带 AddOn 的组合使用 `CompactSpaceAddOn` 添加装饰性前缀/后缀： ```xml Button ``` ### 范围输入 ```xml ``` --- ## 9. CompactSpace 按钮组 ### 工具栏图标按钮组 ```xml ``` ### Primary 按钮组 ```xml Button 1 Button 2 Button 3 Button 4 ``` ### 混合按钮组（Default + Primary + Dropdown） ```xml Button 1 Button 2 Button 3 Button 4 ``` --- ## 10. 垂直紧凑模式 ```xml Button 1 Button 2 Button 3 Button 1 Button 2 Button 3 Button 1 Button 2 Button 3 ``` --- ## 11. CompactSpace 小尺寸通过 `SizeType="Small"` 切换紧凑空间的子控件尺寸： ```xml Submit ``` --- ## 常见组合模式 ### 操作栏 ```xml Submit Cancel Draft ``` ### 链接分割 ```xml Home About Contact ``` ### 搜索栏 ```xml Search ``` ### 数据绑定 ```xml Submit Cancel ```