web-dev-qa-db-ja.com

フラッターのテキストフィールドのサイズを制限するにはどうすればよいですか？

TextFieldウィジェットには、入力できる文字数を制限する「制限」属性がないようです。特定の数の文字のみをTextFieldウィジェットの入力として提供できるようにするにはどうすればよいですか。何らかの方法で装飾プロパティを調べて、そこに制限を設定する可能性がありますが、それも機能しないようです。使用する必要がある別のウィジェットはありますか？

textfieldflutter
15
Anonk

RSprouteの説明にスニペットを追加する必要がありました。完全なコードはここにあります：

TextEditingController _controller = new TextEditingController();
String text = ""; // empty string to carry what was there before it 
onChanged
int maxLength = ...
...
new TextField(
    controller: _controller,
    onChange: (String newVal) {
        if(newVal.length <= maxLength){
            text = newVal;
        }else{
            _controller.value = new TextEditingValue(
                text: text,
                selection: new TextSelection(
                    baseOffset: maxLength,
                    extentOffset: maxLength,
                    affinity: TextAffinity.downstream,
                    isDirectional: false
                ),
                composing: new TextRange(
                    start: 0, end: maxLength
                )
            );
            _controller.text = text;
        } 
    }
);
2
Anonk

maxLengthプロパティはFlutterで使用できます

https://docs.flutter.io/flutter/material/TextField/maxLength.html

textFieldのプロパティにmaxLength: 45,を追加するだけです

4
UpaJah

TextEditingControllerを使用して、テキストフィールドに関するすべてを制御できます。したがって、この情報をTextFieldのonChangedイベントとペアにする場合は、そこで必要なロジックを実行できます。例えば：

TextEditingController _controller = new TextEditingController();
String text = ""; // empty string to carry what was there before it onChanged
int maxLength = ...
...
new TextField(
    controller: _controller,
    onChange: (String newVal) {
        if(newVal.length <= maxLength){
            text = newVal;
        }else{
            _controller.text = text;
        }

    }
)

ガイドライン内に収まるようにテキストフィールドを制御することができます。これを超えると、最後のタイプの前の状態に戻るからです。

3
RSproule

inputFormattersプロパティを使用

例：

TextFormField(
      inputFormatters: [
        LengthLimitingTextInputFormatter(10),
      ]
    )

名前空間

import 'package:flutter/services.Dart';
1
Shyju M

maxLengthプロパティを使用できますが、counterTextを空の文字列に設定することで、下部のカウンターテキストを非表示にできます。

new TextField(
        maxLength: 10,
        decoration: new InputDecoration(
         counterText: '',
        )
    )
0
Sami Kanafani