# Input 使用文档 本文档介绍 AtomUI Input 控件族的各种使用方式,示例代码摘自 Gallery 演示程序。 > 📖 Gallery 源码位置:`controlgallery/AtomUIGallery/ShowCases/Views/DataEntry/LineEditShowCase.axaml` --- ## 前置准备 在 AXAML 中使用 Input 控件,需要引入以下命名空间: ```xml xmlns:atom="https://atomui.net" xmlns:antdicons="https://atomui.net/icons/antdesign" ``` 在 C# 代码中引入: ```csharp using AtomUI.Desktop.Controls; // LineEdit, SearchEdit, TextArea 控件 using AtomUI.Controls; // SizeType 等共享类型 ``` --- ## 1. 基本用法 最基础的 LineEdit 用法——单行文本输入: ```xml ``` --- ## 2. 三种尺寸 通过 `SizeType` 属性设置尺寸,支持 `Large`(40px)、`Middle`(32px,默认)、`Small`(24px)三种: ```xml ``` --- ## 3. 样式变体 通过 `StyleVariant` 属性切换四种样式变体: ```xml ``` 样式变体也适用于带 AddOn 的输入框: ```xml ``` --- ## 4. 前置/后置标签(AddOn) 通过 `LeftAddOn` 和 `RightAddOn` 属性添加输入框外侧的附加组件: ```xml ``` --- ## 5. 前缀/后缀图标 通过 `InnerLeftContent` 和 `InnerRightContent` 添加输入框内侧的装饰元素: ```xml ``` --- ## 6. 清除按钮 通过 `IsAllowClear="True"` 启用清除按钮,点击后清空输入内容: ```xml ``` --- ## 7. 密码输入框 通过 `PasswordChar` + `IsEnableRevealButton` 组合实现密码输入功能: ```xml ``` --- ## 8. 验证状态 通过 `Status` 属性设置验证反馈状态: ```xml ``` --- ## 9. 搜索框(SearchEdit) SearchEdit 提供内置搜索按钮的输入框: ### 基础搜索框 ```xml ``` ### 主色调搜索按钮 ```xml ``` ### 带清除按钮和自定义内容 ```xml ``` ### 搜索框加载状态 ```xml ``` ### 不同变体的搜索框 ```xml ``` ### 搜索按钮事件处理 ```csharp // AXAML // public void OnSearchButtonClick(object? sender, RoutedEventArgs args) { if (sender is SearchEdit searchEdit) { var searchText = searchEdit.Text; // 执行搜索逻辑... } } ``` --- ## 10. 多行文本域(TextArea) ### 基本用法 ```xml ``` ### 自适应高度 ```xml ``` ### 字符计数 ```xml ``` ### TextArea 验证状态 ```xml ``` --- ## 11. 禁用状态 通过 `IsEnabled="False"` 禁用输入框,所有控件和变体均支持: ```xml ``` --- ## 12. MVVM 数据绑定 Input 控件完整支持 Avalonia 的数据绑定: ```xml ``` ```csharp // ViewModel(使用 ReactiveUI) public class FormViewModel : ReactiveObject { [Reactive] public string? Username { get; set; } [Reactive] public string? Email { get; set; } [Reactive] public string? Description { get; set; } [Reactive] public InputControlStatus EmailStatus { get; set; } } ``` --- ## 常见组合模式 ### 登录表单 ```xml Log in ``` ### 搜索栏 ```xml ``` ### 网址输入 ```xml ``` ### 带前缀符号的输入 ```xml ```