InputField

위치: qml/components/control/input/InputField.qml

InputField는 AbstractInputBar를 기반으로 한 단일 줄 텍스트 입력입니다.

목적

• 선택적 검색 모드가 포함된 간결한 단일 줄 텍스트 입력을 제공하십시오.
• 내장 검색 아이콘 및 클리어 버튼 동작을 포함하십시오.
• 공유 입력 베이스에서 IME의 안전 및 초점 동작을 재사용하십시오.
• 상속된 텍스트 입력 API를 통해 비밀번호와 읽기 전용 사용량을 유지하십시오.

API

모드 상수:

• defaultMode
• searchMode

모드 속성 :

• mode
• searchIconVisible (기본값은 mode === searchMode)
• clearButtonVisible
• showClearButton (컴퓨트된)

시각 맞춤화:

• searchIconColor, searchIconStrokeWidth
• clearIconBackgroundColor, clearIconBackgroundColorDisabled
• clearIconForegroundColor

Figma - 파생 기본값:

• backgroundColor/backgroundColorFocused/backgroundColorDisabled -> Theme.panelBackground10
• placeholderColor -> Theme.titleHeaderColor
• placeholderColorDisabled -> Theme.disabledColor
• searchIconColor -> Theme.descriptionColor
• clearIconBackgroundColor -> Theme.descriptionColor

상속된 텍스트 API ( AbstractInputBar):

• text , placeholderText , readOnly , validator , maximumLength , inputMethodHints , 및 기타.
• echoMode (비밀번호 필드에 TextInput.Password를 사용하십시오)

사용법

import LVRS 1.0 as LV

LV.InputField {
    mode: searchMode
    placeholderText: "Search"
}

동작 원리

• 검색 아이콘은 Canvas를 통해 그려지고, 모드/스타일 변경 시 다시 그려집니다.
• 삭제 버튼은 편집 가능하고 텍스트가 비어 있지 않은 경우에만 표시됩니다.
• 명확한 작업은 텍스트를 비우고 즉시 입력 초점을 복원합니다.
• 커서와 텍스트 선택은 기본 Qt TextInput 동작을 사용하며, IME 가드는 기본 컴포넌트에서 상속된 상태를 유지합니다.

고급 예시: 검증된 입력 필드

import QtQuick
import LVRS 1.0 as LV

LV.InputField {
    placeholderText: "Project ID"
    validator: RegularExpressionValidator { regularExpression: /[A-Z0-9_-]{3,20}/ }
    onAccepted: console.log("submitted", text)
}

확장 예시: 검색 / 비밀번호 / 읽기 전용

import QtQuick
import LVRS 1.0 as LV

Column {
    spacing: 8

    LV.InputField {
        mode: searchMode
        placeholderText: "Search"
    }

    LV.InputField {
        placeholderText: "Password"
        echoMode: TextInput.Password
    }

    LV.InputField {
        text: "Read only value"
        readOnly: true
    }
}

문제 해결

삭제 버튼이 표시되지 않으면 확인하십시오:

• clearButtonVisible == true
• readOnly == false
• 현재 텍스트 길이 > 0

레시피: Debounced 쿼리가 포함된 검색 필드

import QtQuick
import LVRS 1.0 as LV

Item {
    property string pendingQuery: ""

    Timer {
        id: debounce
        interval: 180
        repeat: false
        onTriggered: runSearch(pendingQuery)
    }

    LV.InputField {
        mode: searchMode
        placeholderText: "Search logs"
        onTextEdited: function(value) {
            pendingQuery = value
            debounce.restart()
        }
    }
}

실패 패턴

onTextEdited 내부에서 비용이 많이 드는 동기식 필터링을 사용하면 키 입력 지연이 발생합니다. 무거운 작업을 중단하거나 하역하십시오.