且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Flutter:创建一个自动调整大小的 TextField

更新时间:2022-06-04 04:12:11

在 Flutter 中,您可以通过以下方式之一根据需要创建自动调整大小的 TextField(或 TextFormField):


  • maxlines 参数设置为 null。如果输入大量文本,文本字段可以永远扩展。
  • 将 minlinesz 设置为 1,MAXLINES 到 N(一个独到之处整数)。文本字段将根据输入文本的长度自动扩展或收缩。如果到达 N**行,它将停止扩展并开始滚动。


Flutter:创建一个自动调整大小的 TextField


下面的示例将演示第二种方法。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: "坚果",
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('坚果'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(30),
        child: Center(
          child: TextField(
            minLines: 1,
            maxLines: 10,
            style: TextStyle(fontSize: 20),
            decoration: InputDecoration(border: OutlineInputBorder()),
          ),
        ),
      ),
    );
  }
}