在 TextField flutter 中包装文本而不创建换行符

Question

使用 maxLines = null 属性，我可以让文本在 TextField 中换行。但是，这也使用 Enter 来创建换行符。

我不想要那个 - 我想保留 Enter 键给 onSubmitted() 功能。我该怎么做？

Answer 1

您可以使用 TextField 的 FocusNode (WidgetOne) 或 RawKeyboardListener (WidgetTwo):

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Wrapping Single Line Text Fields',
      home: _Page(),
    ),
  );
}

class _Page extends HookWidget {
  const _Page({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final result = useState('');
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            _WidgetOne(onSubmitted: (value) => result.value = value),
            _WidgetTwo(onSubmitted: (value) => result.value = value),
            Container(
                margin: const EdgeInsets.all(15.0),
                padding: const EdgeInsets.all(3.0),
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.black)),
                child: Text('Result: ${result.value}')),
          ],
        ),
      ),
    );
  }
}

class _WidgetOne extends StatelessWidget {
  final ValueChanged<String> onSubmitted;

  const _WidgetOne({Key key, this.onSubmitted}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _controller = TextEditingController();
    final _focusNode = FocusNode(onKey: (node, event) {
      if (event.isKeyPressed(LogicalKeyboardKey.enter)) {
        onSubmitted(_controller.text);
        node.unfocus();
        return true;
      }
      return false;
    });
    return TextField(
      decoration: InputDecoration(hintText: 'With FocusNode onKey'),
      controller: _controller,
      focusNode: _focusNode,
      maxLines: null,
    );
  }
}

class _WidgetTwo extends StatelessWidget {
  final ValueChanged<String> onSubmitted;

  const _WidgetTwo({Key key, this.onSubmitted}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _controller = TextEditingController();
    final _focusNode = FocusNode(onKey: (node, event) {
      if (event.isKeyPressed(LogicalKeyboardKey.enter)) {
        onSubmitted(_controller.text);
        node.unfocus();
        return true;
      }
      return false;
    });
    return RawKeyboardListener(
      focusNode: _focusNode,
      onKey: (event) {
        if (event.isKeyPressed(LogicalKeyboardKey.enter)) {
          onSubmitted(_controller.text);
        }
      },
      child: TextField(
        decoration: InputDecoration(hintText: 'With RawKeyboardListener onKey'),
        controller: _controller,
        maxLines: null,
      ),
    );
  }
}

在 TextField flutter 中包装文本而不创建换行符

Wrap text in a TextField flutter without creating a newline

textfield

flutter

flutter-desktop