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()),
          ),
        ),
      ),
    );
  }
}
相关文章
|
数据安全/隐私保护
Flutter基础widgets教程-TextField篇
Flutter基础widgets教程-TextField篇
153 0
|
Dart 开发者
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
112 0
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
Flutter 65: 图解基本 TextField 文本输入框 (二)
0 基础学习 Flutter,第六十五步:基础文本框装饰器了解一下!
1780 0
Flutter 64: 图解基本 TextField 文本输入框 (一)
0 基础学习 Flutter,第六十四步:基础文本框了解一下!
2990 0
|
2月前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
1月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
2月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
21天前
|
开发框架 移动开发 Android开发
构建高效移动应用:探索Flutter开发框架
【6月更文挑战第28天】随着移动设备的普及,用户对移动应用的需求日益增长。开发者面临着在众多平台间提供无缝体验的挑战。本文深入探讨了Flutter框架如何通过其跨平台特性、热重载功能以及丰富的组件库简化移动应用的开发流程,同时确保高性能和优雅的用户界面设计。
28 2
|
2月前
|
Dart 安全
简化代码、提高效率:Dart和Flutter开发小技巧
在日常开发中,我们常常会使用一些常用的技巧或语法糖,以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士,帮助你更轻松地编写优雅高效的代码。
简化代码、提高效率:Dart和Flutter开发小技巧