TextBox QML Type
一个自定义的文本输入框组件,支持前缀和后缀图标、占位符文本和主题样式。. More...
Import Statement: | import FluentUI.Controls 1.0 |
Properties
- color : color
- font : font
- leftPadding : int
- padding : int
- placeholderTextColor : color
- pressed : bool
- rightPadding : int
- selectedTextColor : color
- selectionColor : color
- verticalAlignment : TextInput::VerticalAlignment
Signals
- void onTextChanged(string text)
Methods
- void clear()
Detailed Description
`TextBox` 组件提供了一个可自定义样式的文本输入框,具有前缀和后缀图标、占位符文本和各种视觉效果。支持根据组件状态(如焦点、悬停等)自动调整背景颜色和文本颜色。
示例用法:
TextBox { placeholderText: "请输入文本" FluentUI.leading: Image { source: "icons/search.svg" } FluentUI.trailing: IconButton { icon.name: FluentIcons.graph_Clear } onTextChanged: { console.log("文本已更改:", text) } }
Property Documentation
color : color |
文本框中文字的颜色。根据文本框的启用状态进行调整。
默认值为 `Theme.res.textFillColorPrimary`(当启用时)或 `Theme.res.textFillColorDisabled`(当禁用时)。
font : font |
文本框中使用的字体,定义了文本的样式。
默认值为 `Typography.body`。
leftPadding : int |
文本框左侧的内边距,包括前缀图标的宽度和额外的间距。
默认值根据 `padding` 和前缀图标的宽度动态计算。
padding : int |
文本框的内边距,定义了文本框的内容与边界之间的距离。
默认值为 `6`。
placeholderTextColor : color |
占位符文本的颜色。
默认值为 `Theme.res.textFillColorSecondary`。
pressed : bool |
表示文本框是否被按下。由 `TapHandler` 管理。
默认值为 `false`。
rightPadding : int |
文本框右侧的内边距,包括后缀图标的宽度和额外的间距。
默认值根据 `padding` 和后缀图标的宽度动态计算。
selectedTextColor : color |
选中文本的颜色。
默认值为 `Colors.white`。
selectionColor : color |
选中文本的背景颜色。
默认值为 `Theme.primaryColor`。
verticalAlignment : TextInput::VerticalAlignment |
文本在文本框中的垂直对齐方式。
默认值为 `TextInput.AlignVCenter`。
Signal Documentation
void onTextChanged(string text) |
当文本框中的文本发生更改时发出的信号。
text 文本框中的当前文本。
Note: The corresponding handler is onOnTextChanged
.
Method Documentation
void clear() |
清除文本框中的文本。