如何在Flutter中制作不换行的多行TextField？

在Flutter中，要制作不换行的多行TextField，可以使用TextField的maxLines属性来控制文本框的行数。将maxLines属性设置为null或者大于1的值，即可实现多行文本框。

以下是一个示例代码：

TextField(
  maxLines: null, // 设置为null表示可以有多行文本
  keyboardType: TextInputType.multiline, // 设置键盘类型为多行输入
)

在上述示例中，通过将maxLines属性设置为null，可以实现不换行的多行文本框。同时，设置keyboardType属性为TextInputType.multiline，可以让键盘显示为适合多行输入的样式。

这种不换行的多行TextField适用于需要用户输入较长文本的场景，比如评论、文章编辑等。腾讯云提供的相关产品中，可以使用腾讯云移动开发套件（Mobile Development Kit，MDK）来开发Flutter应用，其中包含了丰富的组件和工具，可以帮助开发者快速构建高质量的移动应用。

更多关于腾讯云移动开发套件的信息，请访问腾讯云官方网站：腾讯云移动开发套件

相关·内容

flutter TextField换行自适应的实现

无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都是比较陈旧的属性...字号变大控件高度也变高同时保持指定的内外边距. 最重要的功能: 多行文本. 并且控件高度可以随着换行而增高自定义最大行数: 即高度不是随着换行无限增高, 指定控件最大行数后,文本框内容就可以滚动....如果以数值方式指定控件最大高度很容易发生文本被截断的现象. 1,2,3在flutter中是非常方便的, decoration属性可以满足几乎一切自定义样式. 4,也不麻烦, 现在的keyboardType...: TextInputType.multiline,属性已经能够比较好的支持多行文本; 5,单独功能也不麻烦,已经支持属性maxLines指定最大行数麻烦的是这些属性组合起来的效果,却不理想: 只指定...这时候需要用到InputDecoration中的isDense, 去掉冗余边距, 只显示指定的contentPadding 另外一个需要注意的点是, TextField的父节点千万不要是ConstrainedBox

2.3K2 1

【Flutter 专题】64 图解基本 TextField 文本输入框 (一)

和尚最近在学习基础的 Flutter Widget，原因在于很多基础的组件有很多容易忽视的注意事项，了解并熟悉后对整体的开发认知会有所提升；今天和尚学习一下 TextField 文本输入框；...maxLines 为允许展现的最大行数，在使用 maxLength 时内容超过一行不会自动换行，因为默认 maxLines=1，此时设置为 null 或固定展示行数即可自动换行；区别在于 null 会展示多行...字母键盘 --1-- emailAddress 键盘上可随时访问 @ 和 .； --2-- url 键盘上可随时访问 / 和 .； --3-- multiline 适用于多行文本换行； --4-- text...WhitelistingTextInputFormatter 仅允许输入白名单中字符；如 digitsOnly 仅支持数字 [0-9]； c....； dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 中设置本地化代理和支持的语言类型

4.5K5 1

《《在Flutter和androidStudio中制作登录表单》》

《在Flutter和androidStudio中制作登录表单》在本教程中，我将向您展示如何在 Flutter 和 Android studio 中制作漂亮的登录表单，您将学习如何制作背景图像、如何在...Flutter中制作圆形按钮、如何添加一些不透明度以及如何添加图标到您的文本字段。...import 'dart:ffi'; import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home...padding: EdgeInsets.symmetric(horizontal: 35.0, vertical: 22.0), child: TextField...padding: EdgeInsets.symmetric(horizontal: 35.0, vertical: 12.0), child: TextField

2K3 0

Flutter+Dart聊天实例|flutter仿微信聊天|红包|朋友圈

Flutter_Chatroom聊天室项目是基于flutter+dart技术开发的跨平台聊天实战案例，基本实现了登录/注册表单验证、消息表情发送、图片预览、红包/视频/朋友圈等功能。...顶部沉浸式状态条+底部tabbar 至于在flutter中如何实现顶部透明状态栏(去掉状态栏黑色半透明背景)，去掉右上角banner，详细介绍可以去看这篇文章 https://segmentfault.com.../a/1190000022483730 flutter图标Icon及自定义IconData组件 flutter中自带图标使用非常简单 Icon(Icons.search) 可是如果想要自定义图标，如使用阿里图标...中圆点数字/红点提醒如下图红点提示在flutter没有提供这种组件，只能自定义实现。...聊天页面实现|TextField编辑框插入表情 360截图20200513093616798.png flutter中TextField文本框提供的maxLines属性可实现多行/换行文本，不过默认会有高度

6.6K3 1

【Flutter实战】文本组件及五大案例

基本用法如下： Text('老孟') 注意：Text组件一定要包裹在Scaffold组件下，否则效果如下：文本的样式在style中设置，类型为TextStyle，TextStyle中包含很多文本样式属性...，值说明如下： left：左对齐 right：右对齐 center：居中 justify：两端对齐，此属性中文存在bug（Flutter版本：1.17.3）也可以在官方issue中关注此问题 start...设置全局字体样式：在MaterialApp的theme中设置如下 MaterialApp( title: 'Flutter Demo', theme: ThemeData( ......multiline：当TextField为多行时（maxLines设置大于1），右下角的为“换行” 按键。 number：数字键盘。 phone：手机键盘，比数字键盘多"*"和 "#"。...newline：android显示表达“换行”的按钮，ios显示”换行“。

7.2K1 0

Flutter 快速解析 TextField 的内部原理

在 Flutter 里 TextField 是一个比较复杂的控件，而在整个 TextField 里嵌套了许多不同实现的控件，它们组成了我们常用的输入框效果，如下图所示是关于 TextField 的主要构成部分...例如在 _TextFieldSelectionGestureDetectorBuilder 中，可以看到 onSingleTapUp 的处理流程： image 如上代码所示： 1、收起已经弹出的 Toolbar...还是会有“比较大”的性能开销，不建议大规模频繁使用，因为毕竟它属于一个 pushLayer 的操作。...所以本篇主要是通过介绍 TextField 的组成，以及解释内部各组成部分的作用，让开发者可以更清晰的了解 Flutter 里常用的文本输入框的实现，当遇上问题或者需求时，可以快速定位和解决问题，例如：...最后介绍一个简单的问题，之前有人刚好问我：如何在 Flutter 上实现类似微信聊天输入框从一行到多行的输入框效果，如下图代码所示，就是这么简单： TextField( focusNode: _focusNode

2.2K3 0

【第21期】Flutter 文本框初始化时显示默认值

刚开始做Flutter文本框时候，使用的是TextField。似乎大多数情况下都没有问题。...但是现在有一种情况： **问题1: **当页面文本框中的初始值是动态的，从后台获取到的时候，应该怎么办呢？这种情况下，说明创建TextEditingController时，并不知道文本内容。...意思就是说，当不指定controller时，initialValue 就可以自动生成controller的初始值。既然有解决方案，那么就是修改一下代码即可。...什么时候使用TextField？什么时候使用TextFormField？ TextFormField：例如制作一个表单，表单中有用户姓名，姓名必须包含@符号。...'Do not use the @ char.' : null; }, ) TextField：例如制作一个显示文本框，框中提示输入文本框中的内容信息。 ?

4.4K2 0

Element 系列组件之 ETextField

介绍「ETextField」组件是「Flutter Element」组件系列中的输入组件，封装了系统的「TextField」组件，封装了一些常用的功能，并解决了两个常见的错误，详见： Flutter...中 TextField 组件必然会遇到的问题引入在「pubspec.yaml」中依赖 element_ui: ^0.0.1 import import 'package:element_ui...ETextField( obscureText: true, showPassword: true, ) 「height」：设置高度，设置不同的高度，文字都会居中，如果需要多行文本，查看「...ETextField( height: 30, value: 'Flutter Element', ), ETextField( height: 140, value: 'Flutter...Element', ) 「maxLines」：多行文本域 ETextField( height: 200, placeholder: 'please input', maxLines

1.2K2 0

Flutter中的文本输入框组件TextField

Flutter中的文本输入框使用TextField 这个组件来表示。主要的属性如下： 1. maxLines 最大输入行。...默认为单行输入框，配置此参数后则为多行输入框； 2. onChanged 输入改变触发的事件。可以获取当前输入改变以后的值； 3. obscureText 隐蔽的文本。...类似HTML中的 placeholder； (2). border 文本边框。...:flutter/material.dart'; class TextFieldPage extends StatelessWidget { const TextFieldPage({Key...给输入框加上默认的值，代码如下： import 'package:flutter/material.dart'; class TextFieldPage extends StatefulWidget

4.9K2 0

Flutter中的常见表单组件

在Flutter中，常见的表单组件有TextField单行文本框、TextField多行文本框、CheckBox、Radio、Switch、CheckBoxListTile、RadioListTile、...TextField TextField有如下常见属性： maxLines，设置此参数可以将文本框改为多行文本框 onChanged，文本框改变的时候触发的事件 decoration——hintText...那么如何获取TextField中输入的内容呢？其实很简单，我们接着上面的代码，只需要通过 _usernameController.text 就可以获取到对应的输入框中的文字了。...我们可以通过配置 TextField 的 onChanged 回调来监听输入框中文字的实时变化： import 'package:flutter/material.dart'; class HomePage...、Column等）中，不能放在Row这样的水平排列的组件中。

4.9K2 0

Flutter TextField详解

文章目录基本属性 TextField InputDecoration 样式基础样式隐藏文本键盘类型键盘按钮大小写光标最多行数计数器图标提示文字去除下划线边框获取输入内容关闭软键盘...TextField中的内容。...在事件中调用controller.text即返回输入内容。...总结以上就是全部介绍了，然后写了个登录注册的小demo： github：https://github.com/yechaoa/wanandroid_flutter 官方文档：https://api.flutter.dev.../flutter/material/TextField-class.html

4.1K4 0

超过百万的StackOverflow Flutter 问题

_TestState获取到Test的data数据呢：在_TestState也定义同样的参数，此方式比较麻烦，不推荐。...： Color(0xb74093) 因为Color的构造函数是ARGB，所以需要加上透明度，正确用法： Color(0xFFb74093) 如何给TextField设置初始值 class _FooState...dart 2、Window执行如下命令： taskkill /F /IM dart.exe 解决办法二：删除flutter SDK的目录下/bin/cache/lockfile文件。...2、获取父控件的大小并乘以百分比： MediaQuery.of(context).size.width * 0.5 Row直接包裹TextField异常：BoxConstraints forces an...的focusNode： _focusNode = FocusNode(); TextField( focusNode: _focusNode, ... ) 失去焦点： _focusNode.unfocus

2.1K3 1

Flutter TextField（输入控件）

2、普通输入文本最简易的TextFeild不包含提示文本。...示例 TextField( keyboardType: TextInputType.number, ), 5.2 textCapitalization 字母大写 TextField提供了一些有关如何使用户输入中的字母大写的选项...TextCapitalization.characters 大写句子中的所有字符。 TextCapitalization.words 将每个单词的首字母大写。...更改TextField中的光标可以直接从TextField小部件自定义游标。...可以更改角落的光标颜色，宽度和半径。例如，这里我没有明显的原因制作一个圆形的红色光标。

3.2K2 0

2022-01-11: flutter weekly第2期

utm_source=fluttertap Flutter & Flame Step 6: Effects and sounds. 介绍了flutter中如何使用flame制作游戏....utm_source=fluttertap Styling parts of a TextField. 为 TextField 中的文本赋予不同样式的有趣解决方案。...地址：https://www.flutterclutter.dev/flutter/tutorials/styling-parts-of-a-textfield/2021/101326/?...Flutter 开发人员非常熟悉不断增长、不断增长……不断增长的wiidget构建方法。在这段视频中，Craig Labenz 比较了两种不同的方法来构建widget，以及最佳选择。...厌倦了为简单的数据类编写繁琐的样板文件？试试 Freezed，一个 Dart 中的代码生成包，可以加速你的开发。地址：https://www.youtube.com/watch?

4022 0

flutter 输入框组件TextField的实现代码

TextField 顾名思义文本输入框，类似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。...相信大家在原生客户端上都用过这个功能，就不在做具体介绍了，接下来还是具体介绍下Flutter中TextField的用法。...然后我们为输入框做一些其他的效果，如提示文字，icon、标签文字等。...当按下一个未完成操作(如“next”或“previous”)时，用户的内容被提交给[controller]，但不会放弃焦点，因为开发人员可能希望立即将焦点转移到[onsubmit]中的另一个输入小部件。...更改TextField中的光标可以直接从TextField小部件自定义游标。可以更改角落的光标颜色，宽度和半径。例如，这里我没有明显的原因制作一个圆形的红色光标。

4.7K1 1

如何使用 Flutter 创建桌面应用程序

使用 Flutter 开发桌面应用程序在本教程中，我将展示如何使用 Flutter 制作一个简单的跨平台桌面应用程序。...实现跨平台桌面应用程序让我们用 Flutter 实现一个小的跨平台桌面应用程序。我们将制作一个名为“TextPad”的小型文本编辑器应用程序。...TextPad 有一个大的多行文本字段，我们可以在其中输入我们的笔记。它还有一个操作按钮，可以将当前笔记保存到文件中。TextPad 的屏幕截图如下所示。...与之前的 Hello-World 应用程序类似，将以下源代码添加到主应用程序源文件中： import 'dart:io'; import 'package:flutter/material.dart';...在终端上执行以下命令来制作优化的二进制文件： $ flutter build // = linux, windows, macos 如何发布您的应用程序

4.4K2 0

使用 Flutter 制作地图应用

本文主要介绍使用 Flutter 制作地图应用在本文中，我将向您展示如何使用 Flutter 向您的应用程序添加映射功能。...依赖关系创建一个新的 Flutter 项目，然后添加一些我们将要使用的依赖项。打开您的pubspec.yaml文件并在依赖项中添加这些行。...TextField事件监听日常开发中，我们往往希望在三个地方TextField可以给我们回调。输入文字的过程中，这样方便我们在用户输入的时候就可以判断输入内容是否合法。...如果我们需要在onEditingComplete方法中获取到当前的输入值。...如果在开发过程中，我们希望通过点击页面上某个按钮来结束TextField输入并且获取到当前的输入内容。使用FocusNode是很有效的。

2.6K0 0

Flutter组件学习（三）—— 输入框TextFiled

序言 Google 前两天发布了 Flutter 1.0 正式版本，正式版发布之后，LZ身边越来越多的人都开始入坑了，不得不说 Flutter 框架的魅力还是很吸引人的哈，所以我们更要抓紧学习了；之前我写了两篇文章来介绍...Flutter中的Text组件和 Flutter中的Image组件，今天我们继续学习输入框 TextFiled 组件，话不多说，先上图： image TextFiled组件的API 先来看一下TextFiled...6、textInputAction 这个属性用来控制弹出的键盘中右下角的按钮，这是一个枚举值，有很多种形式（下面举几个例子）： TextInputAction.done：完成按钮 TextInputAction.go...：根据用户输入进行下一步按钮 TextInputAction.newline：换行按钮 TextInputAction.next：下一步按钮 TextInputAction.previous：上一步按钮...：默认情况，什么都不设置 8、onChanged 这个属性用来监听输入框的输入，类似Android的TextWatch，但是它只有输入后的值： 1new TextField( 2 onChanged:

2.4K5 0

我对Flutter的第一次失望

我喜欢现在成为一名Web开发人员，而无需做任何额外的工作。我喜欢hot reload。我喜欢通过将小部件组合到布局中来快速构建UI。我喜欢制作ListView简单得多。我喜欢状态管理。...几乎所有工作都由此引擎完成，而在dart：ui中几乎没有暴露。 Paragraph类为我们提供了以下控制： Size：我可以获取整个渲染段落的宽度和高度，它可以是单行或多行。...一种从文本字符串获取换行位置的方法与Android和iOS的比较在Android中，尽管大多数人会使用TextView，但是您可以通过使用StaticLayout，Canvas和Paint类获得低级控件来执行上面列出的所有操作...艺术文字进行文字绘画的应用程序也将从对文字绘画工具的低级别访问中受益。用文本填充非矩形形状为了使文本适合非矩形的内容，您必须进行大量测量。换行在哪里是另一个难题。...文字围绕排除路径流动这在iOS中可用，但在Flutter中不可用。而且没有简单的方法可以自己实现。结论我并不是想说服任何人不要使用Flutter。

2.6K3 0

【Flutter 专题】07 您搭好【登录】页面了么？

和尚最近在利用业余时间学习 Flutter，还真的是值得研究。和尚觉得学习一门技术最好的方式就是动手，在实践过程中结合官网文档才能更快的学习和理解。...和尚这次整理的小博客只是单纯的搭建页面，不涉及以无逻辑和页面跳转，毕竟和尚还没研究到那部分。 ?...在 pubspec.yaml 文件中添加相应的图片文件指向，如：- images/icon_username.png，特别注意：images 与 '-' 之间一定要有空格！！！ ? 3....解决如下：水平排列控件需要用到 Row，竖直排列控件需要 Column；和尚需要在同一行中添加一个图标和一个输入框 TextField，单独的一个文本输入框没问题，但是直接放在 Row 中缺报错；...Flutter 中 ' , ' 类似于 Java 中 ' ; ' 建议编辑完一个属性后添加 ' , ' 而且 Flutter 很贴心的地方是默认后面会有提示，对应的 ' ) ' 级别，方便修改的时候查找

1.1K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云