Logo FluentUI

TextBox QML Type

一个自定义的文本输入框组件,支持前缀和后缀图标、占位符文本和主题样式。. More...

Import Statement: import FluentUI.Controls 1.0

Properties

Signals

Methods

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()

清除文本框中的文本。