Tinyrack

Autocomplete

型付きの静的候補または非同期候補から自由入力を補完します。

型付きの静的候補または非同期候補から自由入力を補完します。

主なプロパティ

プロパティ説明
値検索文字列は自由入力のままです。候補を選択すると、型付きの値も controller に保存されます。
候補静的な items を渡すか、optionsBuilder で候補を非同期に読み込みます。古いリクエストの遅い応答は破棄されます。
操作ポインターを重ねても入力フォーカスを保ちます。矢印キーでハイライトを移動し、Enter で選択、Escape で閉じ、Tab では選択せず次へ移動します。
レイヤーサイズlayerSize で候補レイヤー全体のサイズを指定します。デフォルトではフィールドの幅に合わせ、高さはコンテンツに応じて TRMeasurements.measureXl まで広がります。

インストール

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

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';

TRAutocomplete<String>(
  label: 'Region',
  placeholder: 'Search regions',
  items: const [
    TRAutocompleteItem(value: 'seoul', label: 'Seoul'),
    TRAutocompleteItem(value: 'tokyo', label: 'Tokyo'),
  ],
  onSelected: (region) => selectedRegion = region,
)

例

補完モード パーマリンク

候補リスト、インライン補完、両方の動作、manual モードから選べます。manual モードでは、文字を入力するまで空の検索結果を表示しません。

非同期の候補 パーマリンク

optionsBuilder から Future を返してリモート候補を読み込みます。リクエストの完了順が前後しても、最新の検索文字列だけがポップアップを更新します。

サイズと状態 パーマリンク

uiSize で周囲のコントロールと高さを揃え、無効、読み取り専用、エラーの各入力状態を適切に示します。

Controller のライフサイクル パーマリンク

別のコントロールから検索文字列の読み取り、フィールドのクリア、型付き選択値の確認を行う場合は TRAutocompleteController を所有します。所有する State とともに破棄してください。

フォーム検証 パーマリンク

TRAutocompleteFormField は検索文字列を編集可能なまま保ち、型付きの選択値を Form の検証と保存コールバックへ渡します。

ポインターとキーボード パーマリンク

入力フォーカスを移さずに候補へポインターを重ねられます。矢印キーでハイライトし、Enter で選択、Escape で閉じ、Tab では選択せずに移動します。

API

候補

Prop型 / デフォルト用途
itemsList<TRAutocompleteItem<T>> = const []型付きの静的候補を指定します。無効な項目は結果から除外されます。
optionsBuilderFutureOr<Iterable<TRAutocompleteItem<T>>> Function(String)?現在の検索文字列から候補を読み込みます。同期または非同期で返せます。
completionModeTRAutocompleteCompletionMode = listmanual、list、inline、both の補完動作を選びます。
TRAutocompleteItemvalue, label, enabled = true, leading?, trailing?型付きの値にラベルと任意の表示要素を組み合わせます。

状態とコールバック

Prop型 / デフォルト用途
controllerTRAutocompleteController<T>?query と value を監視し、select や clear を呼び出し、所有するテキスト・フォーカス controller を dispose します。
onQueryChangeValueChanged<String>?自由入力の編集を通知します。
onSelectedValueChanged<T>?候補から選択した型付きの値を通知します。

フィールドとフォーム

Prop型 / デフォルト用途
enabled, readOnlybool = true, bool = false操作を無効にするか、フォーカス可能な読み取り専用の検索文字列を保ちます。
label, placeholder, helperText, errorTextString?フィールドと検証状態を説明します。
uiSize, widthTRUiSize = md, double?コントロールサイズと任意の固定フィールド幅を指定します。
layerSizeTRLayerSize · match anchor / content height ≤ measureXlフィールド幅とは別に、候補レイヤー全体のサイズを指定します。
TRAutocompleteFormFieldFormField<T>型付きの選択値で検証と保存コールバックに参加します。