Flutter TextField自动调整高度以适应输入内容

16 min read

在使用前,需要在你的pubspec.yaml文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  auto_size_text_field: ^1.1.2

然后,你可以这样使用AutoSizeTextField

import 'package:flutter/material.dart';
import 'package:auto_size_text_field/auto_size_text_field.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: AutoSizeTextField(
        style: TextStyle(fontSize: 20.0),
        minLines: 1,
        maxLines: 4,
      ),
    );
  }
}

在上述代码中,AutoSizeTextField最少将显示一行,最多将显示四行,超出部分将开始滚动。

需要注意的是,AutoSizeTextField是第三方库,可能不能满足所有的需求或者可能存在一些问题。在使用前,你可能需要查看其官方文档以了解更多详细信息。

import 'package:flutter/material.dart';

class AutoResizeTextField extends StatefulWidget {
  @override
  _AutoResizeTextFieldState createState() => _AutoResizeTextFieldState();
}

class _AutoResizeTextFieldState extends State<AutoResizeTextField> {
  int _lines = 1;

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (String value) {
        int count = value.length ~/ 30; // 假设每30个字符一行
        setState(() {
          _lines = count + 1;
        });
      },
      maxLines: _lines,
    );
  }
}