フラッターの複数行のテキストフィールド

簡単に聞こえるかもしれませんが、複数行の編集可能なテキストフィールドをフラッターで作成するにはどうすればよいですか？TextFieldは、1行でのみ機能します。

編集：それが明確ではないように思われるので、いくつかの精度。テキストコンテンツを仮想的に折り返すように複数行を設定できますが、それでも複数行ではありません。これは、1行を複数行に表示したものです。あなたがこのようなことをしたいのなら、あなたはできません。ENTERボタンにアクセスできないからです。また、入力ボタンがないということは、複数行がないことを意味します。

自動ラップを使用するには、次のように設定 maxLinesしnullます。

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
)

maxLinesプロパティがの場合、null行数に制限はなく、折り返しが有効になります。

TextFieldをユーザー入力に適合させたい場合は、次のようにします。

TextField(
    keyboardType: TextInputType.multiline,
    minLines: 1,//Normal textInputField will be displayed
    maxLines: 5,// when user presses enter it will adapt to it
    );

ここで最大行数を好きなように設定してください。私の意見では、maxlinesをnullに設定することは良い選択ではなく、何らかの値に設定する必要があります。

他の人はキーボードタイプ「TextInputType.multiline」を使用できるとすでに述べていますが、新しい行が入力されたときに高さを自動的に適応させるTextFieldの実装を追加したかったのは、の入力動作を模倣することがしばしば望まれるためです。 WhatsAppおよび同様のアプリ。

テキストが変更されるたびに、この目的のために入力内の「\ n」チャタクターの数を分析しています。これはやり過ぎのようですが、残念ながら、これまでのところFlutterでこの動作を実現するためのより良い可能性は見つかりませんでした。また、古いスマートフォンでもパフォーマンスの問題は見られませんでした。

class _MyScreenState extends State<MyScreen> {
  double _inputHeight = 50;
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(_checkInputHeight);
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  void _checkInputHeight() async {
    int count = _textEditingController.text.split('\n').length;

    if (count == 0 && _inputHeight == 50.0) {
      return;
    }
    if (count <= 5) {  // use a maximum height of 6 rows 
    // height values can be adapted based on the font size
      var newHeight = count == 0 ? 50.0 : 28.0 + (count * 18.0);
      setState(() {
        _inputHeight = newHeight;
      });
    }
  }


  // ... build method here
  TextField(
    controller: _textEditingController,
    textInputAction: TextInputAction.newline,
    keyboardType: TextInputType.multiline,
    maxLines: null,
  )

TextFieldmaxLinesプロパティがあります。

これを使って

TextFormField(
      keyboardType: TextInputType.multiline,
      maxLines: //Number_of_lines(int),)

を使用するexpandsと、minLinesまたはmaxLines特定の値を与える必要はありません。

TextField(
  maxLines: null,
  expands: true, 
  keyboardType: TextInputType.multiline,
)

TextInputAction.newlineを指定して、TextFieldがEnterキーに応答し、複数行の入力を受け入れるようにします。

textInputAction: TextInputAction.newline,

公式ドキュメントの状態：maxLines行数の制限を削除するには、プロパティをnullに設定できます。デフォルトでは、これは1つです。つまり、これは1行のテキストフィールドです。

注： maxLinesゼロであってはなりません。

上記がうまくいかなかった場合は、minLinesも追加してみてください

TextField(
        keyboardType: TextInputType.multiline,
        minLines: 3,
        maxLines: null);

TextFormFieldウィジェットあなたがラインのセット修正番号したい場合は、minLinesとMAXLINESを設定することができます。それ以外の場合は、maxLinesをnullに設定することもできます。

TextFormField(
      minLines: 5,
      maxLines: 7,
      decoration: InputDecoration(
          hintText: 'Address',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
      ),
),