RadioGroup

import { RadioGroup } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 150px;
    RadioGroup {
        title: "Target Platform";
        RadioButton { text: "Desktop"; }
        RadioButton { text: "Mobile"; }
        RadioButton { text: "Embedded"; }
    }
}

slint

一组单选按钮，用户从中精确选择一项。

RadioGroup 只接受 RadioButton 子元素，可以静态列出， 或由单个 for 循环生成。 不支持在 RadioGroup 中使用 if，并且 for 必须是 该组的唯一子元素。

属性

current-value

string(out)

当前选中的 RadioButton 的 text。要从宿主代码更改选择， 请将目标 RadioButton 的 checked 设置为 true —— 通常通过 双向绑定（checked <=> model.field）。

enabled

booldefault: true

当为 false 时，该组及其按钮不响应输入。

has-focus

bool(out)

当组中任一单选按钮具有键盘焦点时为 true。

title

stringdefault: ""

在组上方渲染的可选标签。为空时不显示标题。

orientation

enum Orientationdefault: vertical

使用 Orientation.vertical（默认）堆叠选项，或 使用 Orientation.horizontal 排列为单行。

回调

selected(value: string)

当用户选择不同的选项时调用。参数为新选中条目的 text。

RadioGroup {
    RadioButton { text: "Desktop"; }
    RadioButton { text: "Mobile"; }
    selected(value) => {
        debug("Selected: ", value);
    }
}

slint

RadioButton

RadioButton 是仅出现在 RadioGroup 内的伪元素。

属性

stringdefault: ""

单选指示器旁显示的标签。

booldefault: true

当为 false 时，用户无法选择此按钮。按钮仍然可见。

bool(in-out)default: false

当这是当前选中的按钮时为 true。 默认情况下，checked 会跟踪该组的选择：当某个按钮被点击 时，它变为 true，而先前选中的按钮的 checked 变为 false。 从外部设置 checked = true 会在下一个 事件循环迭代中选择此按钮；先前选中的按钮将取消选中。 对当前选中的按钮设置 checked = false 会被还原 —— 该组始终最多只有一个选中项。 拒绝对禁用按钮进行程序化选择。

使用双向绑定（checked <=> model.field）使 按钮与外部属性保持同步，包括通过 for 遍历模型：

RadioGroup {
    for m in [{ name: "Mobile", checked: false }, { name: "Desktop", checked: true }]:
        RadioButton { text: m.name; checked <=> m.checked; }
}

slint

单向绑定（checked: cond）适用于初始状态，并在 该组中另一个按钮被选中之前 保持响应 —— 此时 该组会写入 checked = false，与 cond 的绑定将被切断。对于 cond 持续变化的情况，建议使用 <=>。

回调

toggled()

当此按钮的 checked 状态改变时调用 —— 包括它成为选中项时，以及另一个按钮取代它时。

RadioGroup {
    RadioButton {
        text: "Mobile";
        toggled => { debug("Mobile is now", self.checked ? "selected" : "unselected"); }
    }
}

slint

动态按钮

使用 for 从模型驱动按钮。 for 必须是该组的唯一子元素 —— 不支持将其与静态 RadioButton 同级元素混合使用。

RadioGroup {
    for option in ["Desktop", "Mobile", "Embedded"]: RadioButton {
        text: option;
    }
}

slint