Tinyrack

Radio

相互排他的なラジオグループ内で 1 つの選択肢を提供します。

相互排他的なラジオグループ内で 1 つの選択肢を提供します。

主なプロパティ

プロパティ説明
選択グループの値がこの value と一致する間だけ選択されます。ラジオが自分で状態を変えることはなく、グループが変更します。
ラベルlabel はグリフの隣に描画され、タップ領域とセマンティクスノードを 1 つにまとめます。複合ラベルでは、グリフが既定で本文の最初の行に揃います。テキスト以外の内容には TRRadioLabelAlignment.center を選び、文字スタイルは TRText で指定してください。
サイズuiSize は TRUiSize.md・TRUiSize.lg を受け取り、既定値は md です。周囲のコントロールの密度に合わせてください。
利用可否disabled と readOnly はグループが設定した値と合わせて適用されます。readOnly はフォーカスと値を保ち、disabled は操作を止めて選択肢を淡く表示します。
キーボードネイティブのラジオと同じく、Space はキーを離したときに、フォーカス中の選択肢を選びます。選択肢間の移動は TRRadioGroup が担当します。

ラジオは選択値を保持する TRRadioGroup の中でのみ意味を持ちます。各選択肢には、グループ内で一意な value と操作できる label を指定してください。単独のオン・オフ操作には TRCheckbox か TRSwitch を使います。

インストール

パッケージを追加し、公開ライブラリをインポートしてください。

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

プレイグラウンド

使用方法

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

TRRadioGroup(
  defaultValue: 'weekly',
  onValueChange: setSchedule,
  children: const [
    TRRadio(
      value: 'weekly',
      label: TRText('毎週', variant: TRTextVariant.bodySm),
    ),
    TRRadio(
      value: 'monthly',
      label: TRText('毎月', variant: TRTextVariant.bodySm),
    ),
  ],
)

例

未選択と選択済み パーマリンク

選択はグループが保持する値との関係でのみ意味を持つため、1 つのグループ内で両方の状態を比べます。

小、中、大 パーマリンク

md・lg を、選択肢の周囲にあるコントロールの密度に合わせます。

編集可能、読み取り専用、無効 パーマリンク

他と状態が異なる選択肢にだけ利用可否を設定します。全体が同じならグループにまとめて設定してください。

API

TRRadio のプロパティ

Prop型 / デフォルト用途
valueString · requiredグループ内で選択肢を識別します。一意で変化しない値にしてください。
labelWidget? · nullグリフの隣に描画され、タップ対象とセマンティックノードを 1 つに統合します。指定しない場合はグリフだけが表示されます。
uiSizeTRUiSize · TRUiSize.mdグリフとインジケーターのサイズを決めます。
disabledbool · falseグループの値に加えて、この選択肢の操作を止めます。無効な選択肢は矢印キーで飛ばされます。
readOnlybool · falseフォーカスと表示中の値を保ったまま、変更だけを拒否します。
invalidbool · false危険状態の枠線を描きます。検証結果から渡してください。ウィジェットが自動で設定することはありません。
focusNode, autofocusFocusNode? · null, bool · falsefocusNode を明示すると、グループがこの選択肢に割り当てたノードの代わりに使われます。