← 返回主目录

← 返回本类别目录

HusInput 输入框

通过鼠标或键盘输入内容，是最基础的表单域的包装。

• 模块 { HuskarUI.Basic }

• 继承自 { TextField }

• 继承此 { HusDateTimePicker, HusAutoComplete }

支持的代理：

• iconDelegate: Component 图标代理

• clearIconDelegate: Component 清除图标代理

• bgDelegate: Component 背景代理

支持的属性：

属性名	类型	默认值	描述
animationEnabled	bool	HusTheme.animationEnabled	是否开启动画
active	bool	-	是否处于激活状态
showShadow	bool	false	是否显示阴影
type	enum	HusInput.Type_Outlined	输入框形态类型(来自 HusInput)
iconSource	int丨string	0丨''	图标源(来自 HusIcon)或图标链接
iconSize	int	-	图标大小
iconPosition	enum	HusInput.Position_Left	图标位置(来自 HusInput)
clearEnabled	bool丨'active'	false	是否启用清除按钮(active-仅当激活状态下可见)
clearIconSource	int丨string	HusIcon.CloseCircleFilled	清除图标源(来自 HusIcon)或图标链接
clearIconSize	int	-	清除图标大小
clearIconPosition	enum	HusInput.Position_Right	清除图标位置(来自 HusInput)
leftIconPadding	int(readonly)	-	图标在左边时的填充
rightIconPadding	int(readonly)	-	图标在右边时的填充
leftClearIconPadding	int(readonly)	-	清除图标在左边时的填充
rightClearIconPadding	int(readonly)	-	清除图标在右边时的填充
colorIcon	color	-	图标颜色
colorText	color	-	文本颜色
colorBg	color	-	背景颜色
colorShadow	color	-	阴影颜色
radiusBg	HusRadius	-	背景圆角
borderBg	HusBorder	-	背景边框
sizeHint	string	'normal'	尺寸提示
contentDescription	string	''	内容描述(提高可用性)

支持的信号：

• clickClear() 点击清除图标时发出

代码演示

示例 1

通过 iconSource 属性设置图标源，为 0 则不显示。

通过 iconSize 设置清除图标大小。

通过 iconPosition 属性改变图标位置，支持的位置：

• 图标在输入框左边(默认){ HusInput.Position_Left }

• 图标在输入框右边{ HusInput.Position_Right }

通过 clearEnabled 设置是否启用清除按钮。

通过 clearIconSource 设置清除图标，为 0 则不显示。

通过 clearIconSize 设置清除图标大小。

通过 clearIconPosition 设置清除图标的位置，支持的位置：

• 清除图标在输入框左边(默认){ HusInput.Position_Left }

• 清除图标在输入框右边{ HusInput.Position_Right }

import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusInput {
        width: 150
        placeholderText: 'Basic Usage'
    }

    HusInput {
        width: 150
        placeholderText: 'Clear Active'
        clearEnabled: 'active'
    }

    HusInput {
        width: 150
        iconPosition: HusInput.Position_Left
        iconSource: HusIcon.UserOutlined
        placeholderText: 'Username'
    }

    HusInput {
        width: 150
        iconPosition: HusInput.Position_Right
        iconSource: HusIcon.UserOutlined
        placeholderText: 'Username'
    }

    HusInput {
        width: 150
        iconPosition: HusInput.Position_Left
        iconSource: HusIcon.UserOutlined
        clearEnabled: true
        clearIconPosition: HusInput.Position_Left
        placeholderText: 'Username'
    }

    HusInput {
        width: 150
        iconPosition: HusInput.Position_Right
        iconSource: HusIcon.UserOutlined
        clearEnabled: true
        clearIconPosition: HusInput.Position_Right
        placeholderText: 'Username'
    }
}

---

示例 2

通过 showShadow 属性设置是否显示阴影。

通过 type 属性设置输入框形态类型，支持的类型：

• 实线框(默认){ HusInput.Type_Outlined }

• 虚线框{ HusInput.Type_Dashed }

• 无边框{ HusInput.Type_Borderless }

• 下划线{ HusInput.Type_Underlined }

• 填充框{ HusInput.Type_Filled }

import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusSwitch {
        id: shadowSwitch
        checked: false
        text: 'Show shadow: '
    }

    HusInput {
        width: 150
        type: HusInput.Type_Outlined
        placeholderText: 'Outlined'
        showShadow: shadowSwitch.checked
    }

    HusInput {
        width: 150
        type: HusInput.Type_Dashed
        placeholderText: 'Dashed'
        showShadow: shadowSwitch.checked
    }

    HusInput {
        width: 150
        type: HusInput.Type_Borderless
        placeholderText: 'Borderless'
        showShadow: shadowSwitch.checked
    }

    HusInput {
        width: 150
        type: HusInput.Type_Underlined
        placeholderText: 'Underlined'
        showShadow: shadowSwitch.checked
    }

    HusInput {
        width: 150
        type: HusInput.Type_Filled
        placeholderText: 'Filled'
        showShadow: shadowSwitch.checked
    }
}

---

示例 3

通过 sizeHint 属性设置尺寸。

通过 echoMode 属性实现密码框。

import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusRadioBlock {
        id: sizeHintRadio
        initCheckedIndex: 1
        model: [
            { label: 'Small', value: 'small' },
            { label: 'Normal', value: 'normal' },
            { label: 'Large', value: 'large' },
        ]
    }

    HusInput {
        width: 150
        iconPosition: HusInput.Position_Left
        iconSource: HusIcon.UserOutlined
        placeholderText: 'Username'
        sizeHint: sizeHintRadio.currentCheckedValue
    }

    HusInput {
        id: passwordInput
        width: 150
        iconPosition: HusInput.Position_Right
        iconSource: echoMode === HusInput.Password ? HusIcon.EyeInvisibleOutlined :
                                                     HusIcon.EyeOutlined
        iconDelegate: HusIconButton {
            padding: 0
            rightPadding: 10 * passwordInput.sizeRatio
            effectEnabled: false
            type: HusButton.Type_Link
            iconSize: passwordInput.iconSize
            iconSource: passwordInput.iconSource
            onClicked: {
                if (passwordInput.echoMode === HusInput.Password) {
                    passwordInput.echoMode = HusInput.Normal;
                } else {
                    passwordInput.echoMode = HusInput.Password;
                }
            }
        }
        placeholderText: 'Password'
        sizeHint: sizeHintRadio.currentCheckedValue
    }
}

---

示例 4

组合其他组件。

import QtQuick
import HuskarUI.Basic

HusSpace {
    layout: 'Row'

    HusInput {
        id: input
        width: 250
        text: 'Combine input and button'
    }

    HusIconButton {
        type: HusButton.Type_Primary
        text: 'Submit'
        loading: true
    }
}