Radio
Radioウィジェットは、複数の選択肢の中から1つだけを選べる単一選択ボタンです。
同じグループに属するRadioのうち1つを選択すると、残りは自動的に解除されます。
定義・役割
Radioウィジェットは、1つのグループ（groupId）の中で値を1つだけ選択できるようにする円形の選択ボタンを描画します。同じgroupIdを持つRadioが1つの選択グループを構成し、ユーザーが1つを選択するとグループ値（groupValue）がそのRadioのvalueに変わり、残りは解除されます。
- カテゴリー: Contents
- デフォルトのグループ値: なし（空文字列）
機能
| 機能 | 説明 |
|---|---|
| 単一選択 | 同じgroupIdグループの中では値が1つだけ選択されます。別のRadioを選択すると、以前の選択は自動的に解除されます。 |
| グループの管理 | groupIdでRadioを1つのグループにまとめ、groupValueで現在選択されている値を共有します。 |
| 選択の解除 | toggleableをオンにすると、すでに選択されているRadioをもう一度タップして選択を解除できます。 |
| 選択時の動作 | 選択が変わるとonTapに接続した動作（ロジック・スクリプト）が実行されます。 |
| カラー・フォーカス | 選択カラー（activeColor）・フォーカスカラー（focusColor）・マウスオーバーカラー（hoverColor）と自動フォーカスを設定します。 |
使い方
- 左側のウィジェットパレットでContentsカテゴリーを開きます。
- Radio項目をキャンバスにドラッグ＆ドロップします。
- 1つのグループにまとめるRadioには、右側のPropertiesパネルで同じ
groupIdを指定します。 - 各Radioの
valueにそれぞれ異なる値を指定します。 - 必要に応じて
onTapに選択時に実行する動作を接続し、選択カラーなどの見た目を調整します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
groupId | Radioグループの識別子。同じ値を持つRadioが1つの選択グループを構成します。 | 空文字列 | 文字列 |
value | このRadioの値。選択されるとグループ値がこの値に設定されます。 | 空文字列 | 文字列 |
groupValue | グループで現在選択されている値。この値がvalueと同じ場合は選択状態として表示されます。 | 空文字列 | 文字列 |
toggleable | すでに選択されているRadioをもう一度タップして選択を解除できるかどうか | オフ（false） | true / false |
activeColor | 選択されているときのカラー | 未設定 | カラー |
focusColor | フォーカス状態のときのカラー | 未設定 | カラー |
hoverColor | マウスを乗せたときのカラー | 未設定 | カラー |
materialTapTargetSize | タップ対象エリアのサイズ | 未設定 | padded, shrinkWrap |
visualDensity | 視覚密度（構成要素の間隔の詰まり具合） | -4, -4（コンパクト） | 視覚密度の値 |
focusNode | フォーカスノード | 未設定 | フォーカスノード |
autofocus | 画面に入ったときに自動でフォーカスするかどうか | オフ（false） | true / false |
注意・ヒント
警告
同じグループにまとめるには、RadioのgroupIdを同じ値に指定する必要があります。groupIdが異なると互いに独立したグループとして動作し、複数が同時に選択されることがあります。
ヒント
同じグループの中では、各Radioのvalueをそれぞれ異なる値に指定することで選択が区別されます。toggleableをオンにすると、選択された項目をもう一度タップして解除できます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、Radio Widget Controlドキュメントで確認してください。