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

简介: 在 Flutter 中,您可以通过以下方式之一根据需要创建自动调整大小的 TextField(或 TextFormField):将 maxlines 参数设置为 null。如果输入大量文本,文本字段可以永远扩展。将 minlinesz 设置为 1,MAXLINES 到 N(一个独到之处整数)。文本字段将根据输入文本的长度自动扩展或收缩。如果到达 N**行,它将停止扩展并开始滚动。

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


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


image.png


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

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()),
          ),
        ),
      ),
    );
  }
}
相关文章
|
Dart 开发者
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
134 0
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
|
数据安全/隐私保护
Flutter基础widgets教程-TextField篇
Flutter基础widgets教程-TextField篇
171 0
Flutter 65: 图解基本 TextField 文本输入框 (二)
0 基础学习 Flutter,第六十五步:基础文本框装饰器了解一下!
1854 0
Flutter 64: 图解基本 TextField 文本输入框 (一)
0 基础学习 Flutter,第六十四步:基础文本框了解一下!
3088 0
|
2月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
27天前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
56 8
|
27天前
|
存储 JavaScript 前端开发
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战。本文介绍了几种常用的状态管理框架,如Provider和Redux,分析了它们的基本原理、优缺点及适用场景,并提供了选择框架的建议和使用实例,旨在帮助开发者提高开发效率和应用性能。
34 4
|
27天前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
39 2
|
2月前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
103 3