Trường văn bản nhiều dòng bị rung

Nghe có vẻ dễ dàng nhưng Làm thế nào chúng ta có thể tạo một trường văn bản có thể chỉnh sửa nhiều dòng một cách lộn xộn? TextField chỉ hoạt động với một dòng duy nhất.

Chỉnh sửa: một số điều chỉnh vì có vẻ như nó không rõ ràng. Mặc dù bạn có thể đặt đa dòng để bao bọc hầu như nội dung văn bản, nhưng nó vẫn không phải là đa dòng. Đó là một dòng đơn được hiển thị thành nhiều dòng. Nếu bạn muốn làm điều gì đó như thế này thì bạn không thể. Bởi vì bạn không có quyền truy cập vào ENTERnút. Và không có nút enter nghĩa là không có nhiều dòng.

Để sử dụng tự động bọc, chỉ cần đặt maxLineslà null:

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

Nếu thuộc maxLinestính này null, không có giới hạn về số dòng và tính năng bọc được bật.

Nếu bạn muốn Trường văn bản của mình thích ứng với đầu vào của người dùng thì hãy làm như sau:

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

ở đây, hãy đặt các dòng tối đa thành bất kỳ thứ gì bạn muốn và bạn có thể thực hiện. Theo ý kiến ​​của tôi, đặt maxlines thành null không phải là một lựa chọn tốt, chúng ta nên đặt nó thành một số giá trị.

Mặc dù những người khác đã đề cập rằng loại bàn phím "TextInputType.multiline" có thể được sử dụng, tôi muốn thêm việc triển khai TextField tự động điều chỉnh chiều cao của nó khi nhập một dòng mới, vì nó thường được mong muốn bắt chước hành vi nhập của WhatsApp và các ứng dụng tương tự.

Tôi đang phân tích số lượng người trò chuyện '\ n' trong mục nhập cho mục đích này mỗi khi văn bản được thay đổi. Điều này có vẻ là quá mức cần thiết, nhưng tiếc là cho đến nay tôi không tìm thấy khả năng tốt hơn để đạt được vẻ đẹp này trong Flutter và tôi không nhận thấy bất kỳ vấn đề hiệu suất nào ngay cả trên điện thoại thông minh cũ hơn.

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,
  )

dùng cái này

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

TextFieldcó thuộc tính maxLines .

Sử dụng expandsvà bạn không cần phải cung cấp minLineshoặc maxLinesbất kỳ giá trị cụ thể nào:

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

Chỉ định TextInputAction.newline để tạo TextField phản hồi với phím enter và chấp nhận đầu vào nhiều dòng :

textInputAction: TextInputAction.newline,

Tài liệu chính thức cho biết : maxLinesThuộc tính có thể được đặt thành null để loại bỏ hạn chế về số dòng. Theo mặc định , nó là một, nghĩa là đây là trường văn bản một dòng.

LƯU Ý: maxLines không được bằng 0.

nếu trên một lần không làm việc cho bạn sau đó thử add minLines cũng

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

Đối với tiện ích TextFormField , Bạn có thể đặt minLines và maxLines nếu bạn muốn đặt số dòng cố định. Nếu không, bạn cũng có thể đặt maxLines thành null.

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