テキストフィールドの概要
複雑なプロパティを持つテキスト入力ボックス。コントローラー、テキストスタイル、装飾線、行制限、カーソルスタイルなどを指定できます。入力ボックス変更イベントをリッスンします。
使用するシーン:
検索ボックス、アカウントのパスワードなどを入力します。
| 属性 | 効果 |
|---|---|
| コントローラ | 入力ボックスリスナー |
| 装飾 | 入力ボックスの装飾属性 |
| テキスト整列 | コンテンツの配置 |
| textAlignVertical | テキストの垂直方向の配置 |
| テキスト方向 | 文字方向 |
| 最大長さ | 最大長を入力してください |
| カーソルの色 | カーソルの色 |
| カーソルの高さ | カーソルの高さ |
| カーソル幅 | カーソルの幅 |
| カーソルを表示 | カーソルを表示するかどうか |
| 編集完了時 | 編集完了 |
| 変更済み | テキストが変更されたときに応答する |
| 送信済み | 「OK」をクリックすると応答する |
InputDecoration プロパティ
| 属性 | 効果 |
|---|---|
| アイコン | 境界線の左側のアイコン |
| アイコン色 | 左側のアイコンの色 |
| ラベル | ラベルテキスト() |
| ラベルテキスト | ラベルのテキストの内容 |
| ラベルスタイル | ラベルのテキストスタイル |
| ヘルパーテキスト | 左下のテキストコンテンツ |
| ヘルパースタイル | 左下のテキストスタイル |
| ヘルパーMaxLines | 左下のテキストの最大行数 |
| ヒントテキスト | プロンプトテキストの内容 |
| ヒントスタイル | TextStyle を使用してスタイルを変更する |
| ヒントテキストの方向 | プロンプトテキストの方向 |
| ヒント最大行数 | プロンプトテキストコンテンツの最大行数 |
| エラーテキスト | 例外プロンプトのテキストを入力してください |
| エラースタイル | 入力例外プロンプトのテキストスタイル |
| エラー最大行数 | 例外プロンプトテキストの最大行数を入力します。 |
| コンテンツパディング | 入力パディング |
| プレフィックスアイコン | 左内側のアイコン |
| プレフィックスアイコン制約 | 左内側のアイコンの制約サイズ |
| 接頭語 | 左内側のテキスト |
| プレフィックステキスト | 左内側のテキスト |
| プレフィックススタイル | 左内側のテキストスタイル |
| 接頭辞アイコンの色 | 左内側のアイコンの色 |
| サフィックスアイコン | 右内側のアイコン |
| サフィックス | 右内側のテキスト |
| サフィックステキスト | 右内側のテキスト |
| サフィックススタイル | 右内側のテキストスタイル |
| サフィックスアイコン色 | 右内側のアイコンの色 |
| サフィックスアイコン制約 | 内部右侧图标约束大小 |
| counter | 右侧底部文本内容 |
| counterText | 右侧底部文本内容 |
| counterStyle | 右侧底部文本内容 |
| enabledBorder | 禁用之后显示边线 |
| border | 边线相关 |
| enabled | 是否禁用 |
label 属性效果图
icon 属性效果图
常用于左侧图标展示
border 属性效果图
输入框边框
hintText 属性效果图
未点击时文案提示
counter 属性效果图
helperText 属性效果图
prefixIcon 属性效果图
suffixIcon 属性效果图
整合部分属性代码块与效果图
TextField(
controller: _controller,
style: const TextStyle(color: Colors.blue),
decoration: const InputDecoration(
label: Text("标签label"),
icon: Icon(Icons.favorite),
iconColor: Colors.black,
border: OutlineInputBorder(),
hintText: "提示文本hintText",
hintStyle: TextStyle(color: Colors.grey, fontSize: 15),
contentPadding: EdgeInsets.all(2),
counter: Text("提示文本counter"),
helperText: "帮助文本helperText",
prefixIcon: Icon(Icons.arrow_left),
suffixIcon: Icon(Icons.arrow_right),
suffix: Text('suffix'),
),
onEditingComplete: () {
print('onEditingComplete');
},
onChanged: (v) {
print('onChanged:' + v);
},
onSubmitted: (v) {
FocusScope.of(context).requestFocus(_focusNode);
print('onSubmitted:' + v);
_controller.clear();
},
)
