uno-game/ui/Components.slint

import { LineEdit } from "std-widgets.slint";

export component Button inherits Rectangle {
    in property <float> scale;

    in property <string> text;
    in property <bool> enabled: true;

    callback clicked;

    width: 100px * scale;
    height: 36px * scale;
    background: !root.enabled ? #555555               // 禁用状态
                         : touch.pressed ? #444444    // 按下
                             : #2C2C2C;               // 默认
    border-radius: 6px * scale;

    touch := TouchArea {
        enabled: root.enabled;
        clicked => {
            root.clicked()
        }
    }

    Text {
        text: root.text;
        color: #FFFFFF;
        font-size: 14px * scale;
        vertical-alignment: center;
        horizontal-alignment: center;
    }
}

export component LabeledInput inherits VerticalLayout {
    in property <float> scale;

    in property <InputType> input-type: InputType.text;

    in property <string> label-text;
    in-out property <string> value <=> input.text;
    in property <string> placeholder;

    spacing: 6px * scale;

    // 标签文本
    Text {
        text: root.label-text;
        font-size: 12px * scale;
        font-weight: 500;
        color: #555555;
    }

    // 输入框背景和实体
    Rectangle {
        height: 36px * scale;
        background: #FFFFFF;
        border-radius: 6px * scale;
        border-width: 1px * scale;
        border-color: input.has-focus ? #888888 : #E0E0E0; // 聚焦时边框变深

        input := LineEdit {
            width: 100%;
            height: 100%;
            font-size: 14px * scale;
            placeholder-text: root.placeholder;
            input-type: root.input-type;
        }
    }
}