首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将行号添加到Flutter上的TextField?

在Flutter上添加行号到TextField的方法如下:

  1. 首先,我们需要将TextField包装在一个ListView或SingleChildScrollView中,以便能够显示行号。
  2. 创建一个自定义的Widget,用于显示行号。可以使用一个Column包含多个Text或一个ListView.builder来生成行号列表。
  3. 在TextField的外层包裹一个Row,将行号Widget和TextField放在同一行上。
  4. 使用TextEditingController来监听TextField的文本变化,并根据文本的行数更新行号Widget的数量。

下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class LineNumberTextField extends StatefulWidget {
  @override
  _LineNumberTextFieldState createState() => _LineNumberTextFieldState();
}

class _LineNumberTextFieldState extends State<LineNumberTextField> {
  TextEditingController _controller;
  List<int> _lineNumbers = [1];

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    _controller.addListener(_updateLineNumbers);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _updateLineNumbers() {
    String text = _controller.text;
    int lines = text.split('\n').length;

    setState(() {
      _lineNumbers = List.generate(lines, (index) => index + 1);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          children: _lineNumbers.map((lineNumber) {
            return Text(
              lineNumber.toString(),
              style: TextStyle(fontSize: 12),
            );
          }).toList(),
        ),
        SizedBox(width: 8),
        Expanded(
          child: ListView(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            children: [
              TextField(
                controller: _controller,
                maxLines: null,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Enter text here...',
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

使用方式如下:

代码语言:txt
复制
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Line Number TextField')),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: LineNumberTextField(),
        ),
      ),
    );
  }
}

这样,就能在TextField上方显示行号了。每次文本改变时,行号会自动更新。

对于推荐的腾讯云产品和产品介绍链接地址,请参考腾讯云官方文档和网站,以获取最新的产品信息和链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

flutter  TextField换行自适应实现

无论哪种界面框架输入文本框都是非常重要控件, 但是发现flutter输入框TextField介绍虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能介绍都是比较陈旧属性....现在就需要一个类似微信输入文本框, 这样一个非常实用效果flutter要如何实现?...如果以数值方式指定控件最大高度很容易发生文本被截断现象. 1,2,3在flutter中是非常方便, decoration属性可以满足几乎一切自定义样式. 4,也不麻烦, 现在keyboardType...最终结果: Row( children: <Widget [ Text('111'), Expanded( child: TextField( keyboardType: TextInputType.multiline...https://stackoverflow.com/questions/51205333/flutter-textfield-that-auto-expands-when-text-is-entered-and-then-starts-scrolli

2.4K21

Flutter 快速解析 TextField 内部原理

FlutterTextField 是一个比较复杂控件,而在整个 TextField 里嵌套了许多不同实现控件,它们组成了我们常用输入框效果,如下图所示是关于 TextField 主要构成部分...,那恭喜你,你开启了 Flutter 高级开发修炼之路。...之前在 《Flutter 画面渲染全面解析》 详细介绍过这部分知识,这简单不严谨地说就是: RepaintBoundary 主要是用于形成一个 Layer,得到一个独立绘制区域。...所以本篇主要是通过介绍 TextField 组成,以及解释内部各组成部分作用,让开发者可以更清晰了解 Flutter 里常用文本输入框实现,当遇上问题或者需求时,可以快速定位和解决问题,例如:...最后介绍一个简单问题,之前有人刚好问我:如何在 Flutter 实现类似微信聊天输入框从一行到多行输入框效果,如下图代码所示,就是这么简单: TextField( focusNode: _focusNode

2.4K30
  • 在 CentOS 如何将用户添加到 Sudoers

    第一个就是将用户添加到 sudoers 文件。这个文件包含了一些信息,这些信息定义了哪个用户和哪个用户组被授予了 sudo 权限,以及权限级别。...第二个选项就是将用户添加到 sudo 用户组(定义在sudoers文件中)。...一、将用户添加到 wheel 用户组 在 CentOS 系统授予一个用户 sudo 权限最容易方式就是,将该用户添加到wheel用户组。...二、将用户添加到 sudoers 文件 拥有 sudo 权限用户和用户组在/etc/sudoers中被配置。添加用户到这个文件,可以允许你授权用户自定义访问命令并且配置某些安全策略。...文件名称并不重要。通常做法是,将文件名称命名为用户名称。 三、总结 授予一个用户 sudo 权限很简单,你只需要将用户添加到wheel用户组。

    10.9K10

    FlutterTextField 组件必然会遇到问题

    TextField 组件几乎是开发中必然会用到一个组件,在使用过程中会遇到两个非常棘手问题: 字数统计异常。 设置高度,文字无法居中。...❝在去年时候,这个Bug解决了很久都没有解决,最终产品妥协去掉了这个功能,直到最近查看源码时候,无意中发现了这个Bug解决方案。...」 基本用法,为了方便定位文字是否居中,给 「TextField」 加上边框: TextField( decoration: InputDecoration( enabledBorder:...下面改变 TextField 高度: Container( height: 30, child: TextField( decoration: InputDecoration(...TextField高度 和 文字高度共同决定,公式是: ❝「( TextField高度 - 文字高度)/2」 ❞ 我们需要计算出文字高度: TextStyle _style = const

    2.8K30

    如何将Flutter优雅嵌入现有应用

    在早期Flutter发布时候,谷歌虽然提供了iOS和Android AppFlutter嵌入方案,但主要针对是纯Flutter情形,混合开发支持并不友好。...初始化链将所有模块需要初始化代码串起来,同样是为了降低耦合度,在初始化链可以就近注册模块页面的构造器,页面路由观察者,页面生命周期观察者等,也可以在多引擎模式下提前启动某一个引擎。...iOS 显隐当前页面的导航栏 原生导航栏在 dart 一般情况下是不需要,但切换到原生页面又需要把原生导航栏置回来,thrio 不提供的话,使用者较难扩展,我之前在目前一个主流Flutter...thrio设计解析 目前开源 Flutter 嵌入原生库,主要还是通过切换 FlutterEngine 原生容器来实现,这是 Flutter 原本提供原生容器之上最小改动而实现,需要小心处理好容器切换时序...popTo 流程与 push 基本一致; 但在多引擎模式下,popTo需要处理多引擎路由栈同步问题; 另外在 Dart 端,popTo实际是多个pop或者remove构成,最终产生多次didPop

    2.2K20

    AI应用:SAP和MapR如何将AI添加到他们平台

    有时候,当我们写关于分析、机器学习和AI时候,提出具体用例是很有挑战性。这使得读者更难掌握这些技术力量。这是一种耻辱,因为它让AI显得虚无飘渺,而非有用或易于理解。...有时,ERP被认为是十分平凡。事实,ERP是使企业运行因素,而当将酷技术应用于ERP时,它们影响可能是巨大,而且它们价值变得非常清晰。...在Spark运行Java和Python代码现在可以直接访问MapROJAI(开放式JSON应用程序接口),而以前只有Scala代码。...有了这个扩展包,MapRData Science Refinery已经升级到1.1版本,并增加了对PySpark代码(即运行在SparkPython代码)支持,以在集群中运行。...MapR通过包含Zeppelin笔记本系统和MapR客户端容器图像来实现这个目标。容器图像被推送到集群中节点,允许在Spark以分布式方式运行数据科学Python代码。

    1.8K90

    如何将IDEA项目上传到GitHub?

    最近,找到了一个去年用Springboot完成一个web类博客项目,于是想到了上传到GitHub开源分享。...相信还有一部分刚入"IT"圈编程小白(请忽略我也是一个菜鸟…),于是正好利用这个机会做一期记录。 1.在IDEA选中Git ? 2.找到需要上传GitHub仓库,复制仓库路径 ?...4.选中新创建路径,创建本地仓库 ? 可能会弹出让你在该仓库创建项目的弹窗,这里点击No ? 5.将需要上传项目拷贝至该仓库对应本地仓库目录下 ?...上传成功后项目左下角会有提示,展示你第一次提交所附带信息 ? 8.从本地仓库push到Git ? ? push成功右下角会有提示 ?...然后我们打开Git,查看我们仓库,发现我们项目提交成功了 ! ? 那么,你们看懂了么~~

    6.7K50

    Flutter』警告修复 & 常用组件 TextField

    我们只需要将final关键字添加到isCheck字段即可。...『Flutter』常用组件 TextField1.前言经过上一篇文章介绍,给大家讲述了 Flutter有无状态组件,以及有状态组件使用方法,本文将继续围绕着 Flutter 中常用组件来讲述一下...本次要讲述组件有:TextField2.TextField2.1.介绍Flutter TextField 组件是一个用于文本输入基础组件,它提供了用户输入文本界面。...TextField,它包含一个外边框和一个标签,并且还添加了对文本变化和提交监听。...3.参考资料https://api.flutter.dev/flutter/material/TextField-class.htmlEnd如果您对本文有任何疑问或想法,请在评论区留言,我将很乐意与您交流

    44711

    如何将MV中音频添加到EasyNVR中做直播背景音乐?

    经过我们共同研究之后,终于想出一个办法,就是先将这个音乐提取出来,再添加进EasyNVR中。...我们采用是ffmpeg命令行方法拿到AAC数据,具体命令如下: ffmpeg -i input-video.mp4 -vn -acodec copy output-audio.aac 将获取AAC...音频文件在EasyNVR通道管理页面进行添加,如下图: 这样问题就解决了。...不得不说ffmpeg就是强大,ffmpeg是专门用于处理音视频开源库,既可以使用它API对音视频进行处理,也可以使用它提供工具,如 ffmpeg,ffplay,ffprobe,来编辑你音视频文件...如果大家对我们开发及产品编译比较感兴趣的话,可以关注我们博客,我们会不定期在博客中分享我们开发经验和一些功能使用技巧,欢迎大家了解。

    4.1K40

    ABAP 如何将自定义区域菜单添加到系统默认菜单中

    在SAP应用中,不同公司往往会根据自身需求开发很多报表或者功能页面,同样也会对这些客制化开发功能进行分类,并且这些分类菜单是能够被所有用户读取。...在SAP Easy Access中所显示系统菜单一般也被称之为区域菜单,区域菜单输入点默认是S000,可以通过事务代码SSM2来查看及设置系统默认区域菜单输入点,如下图所示: ?...当然我们也可以在它下面进行扩展,增加自定义区域菜单,具体操作如下: 1、输入事务代码SE43,在“区域菜单”字段中输入S000,然后单击工具栏中“编辑”按钮,系统将弹出“指定处理模式”对话框,需要用户选择使用哪种更改模式...2、在区域菜单编辑页面中选择主菜单,然后执行“编辑”-“导入”-“其他菜单”命令,在弹出“区域菜单选择”对话框中输入自定义区域菜单名称,如下图所示: ? ?...3、保存上述设置,可以在初始页面中看到新增自定义区域菜单,该区域菜单可以分配系统中所有的用户浏览及操作。 参照以上方法,可以根据不同用户具体业务需求来设置区域菜单。 ?

    3.7K10

    Flutter 字体另类玩法:FontFeature

    在以前Flutter 默认文本和字体知识点》 和 《带你深入理解 Flutter字体“冷”知识》 中,已经介绍了很多 Flutter 上关于字体有趣知识点,而本篇讲继续介绍 Flutter...image 我们知道 Flutter 默认在 Android 使用是 Roboto 字体,而在 iOS 使用是 SF 字体,但是其实 Roboto 字体也是分很多类型,比如你去查阅手机 system...另外如果你在 Mac Web 使用 Flutter Web,可以看到指定是 .AppleSystemUIFont ,而对于 .AppleSystemUIFont 它其实不算是一种字体,而是苹果字体一种集合别称...字体,对应还有PingFang TC 和 PingFang HK 繁体集,而关于这个问题在 Flutter 之前还出现过比较有意思 bug : 用户在输入拼音时,iOS 会在中文拼音之间添加额外...当然后续 #16709 修复了这个问题 ,而在以前文章我也讲过,当时我遇到了 “Flutter 在 iOS 系统,系统语言是韩文时,在和中文一起出现会导致字体显示异常" 问题 : image.png

    1.8K20

    如何优雅将代码粘贴到报告(高亮+格式化+行号

    作为一个严格要求自己(强迫症)程序员,怎么可以容忍看到自己辛辛苦苦写代码被粘贴成这个样子呢? ? 不行不行,太丑了,简直侮辱我代码,所以怎么搞呢?...推荐一:VS VS直接复制粘贴过来是这个样子,也还可以接受,MATLAB也差不多样子。当然前提是在用这些工具写代码,直接粘过来,方便快捷。 ?...可以选用多种语言,根据指定语言格式进行高亮 ? 将代码复制到文本框中,show highlight,就好了 ?...而且复制到word是有行号(并且别人如果抄你代码可能会很尴尬一点点去除行号,防抄袭) 写在最后 咳咳咳,当然不可避免,你可能之后会看自己代码,拿回来跑一跑,为了快速去除行号,参考该文章: https

    2K10

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

    Flutter 设备命令屏幕截图 Flutter 设备命令屏幕截图 创建一个新 Flutter 应用 像任何其他典型 CLI 一样,我们可以使用create如下所示命令创建一个新应用程序:...与之前 Hello-World 应用程序类似,将以下源代码添加到主应用程序源文件中: import 'dart:io'; import 'package:flutter/material.dart';...() {_exportToFile(context);} )] ), body: Center( child: TextField...也可以看我另一篇文章,我在里面详细说明了如何将flutter应用部署到 Windows ,也就是打包成exe可执行文件。...Flutter 性能比 Electron 好,因为它不在 Web 浏览器执行应用程序 GUI 逻辑。 Flutter 确实给开发者带来了一些痛点。

    4.5K20

    ios-ScrollView添加到view,viewtouchesBegan无法执行

    大家好,又见面了,我是你们朋友全栈君。...这几天做时候碰到了这么个问题,就是当我们把ScrollView添加到控制器view,或者添加到UICollectionViewCell上面,scrollView父视图touchesBegan都无法响应...而当我们把scrollViewuserInteractionEnabled改成false时候,父视图touchesBegan就可以执行。这里记录下。...还有就是当我们自定义了UIScrollView,往里面添加单击手势时候,只会响应单击手势点击,而不会响应touchesBegan方法。...根据一些资料,其实原因应该是这样就是手势识别是对touch一个封装,UIScrollView支持捏合手势,然后一般来说,如果做过手势监听控件就都会屏蔽掉touch事件。

    98530

    输入和选择

    在前面的文章中我们学习了Flutter中事件处理,包括组件单击、双击、长按、滑动等。想必大家多其已经有了一定认识。 那么,这节我们主要介绍下Flutter中输入和选择组件用法。...相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField用法。...在逻辑,每当我们点击下面的按钮都会判断用户名密码是否是flyou和admin,并且使用控制器清空已经输入用户名和密码。...关于TextField其他用法就不在一一介绍了,有兴趣小伙伴可以自己尝试下。...最近大家都在说公众号阅读不方便,会把文章同步到网站上(http://flutter.link),点击阅读原文即可查看。

    2.4K20

    围观GithubFlutter评论最多Issue

    那个评论最多Issue 关注Flutter同学们可能经常会去Github看看Flutter现状。...这一方面说明Flutter确实火爆,另一方面open issue这平稳走势也确实让广大开发者对Flutter未来有些许担心。这个问题可能大家各自会有不同看法,这里我就不展开说了。...足足是评论数第二多issue两倍还有余。issue提出者是@rrousselGit,他是Flutter官方推荐状态管理库Provider作者,也是flutter_hook作者。 ?...builder: (context, request) { return Container(); }, ); } } 可见,Builder模式基本是满足上面那几个条件...独立性,自管理,性能都不存在问题,组合性也不存在问题。具体可以参考我之前介绍Hooks文章《Flutter Hooks 使用及原理》。

    1K10

    Flutter数据监控深入理解

    我们要关注什么数据 对于Flutter这样组件来说,我们需要关注数据无非是两项: 性能数据 异常数据 这两项数据是我们监控整个Flutter应用是否优秀最基础也是最重要指标。...对于渲染时长,我们可以通过Flutter给出系统回调在监控页面第一帧渲染时间。...,得出我们整个Flutter项目的渲染成功率,这是很重要一个指标。...针对于上面这个问题,我想法是既然要统计是影响用户error,那我们可以借助Flutter本身特性,我们知道Flutter在build期间发生了异常会展示一个红屏widget,这个widget是...总结 通过上面的几个数据统计,我们可以计算出Flutter应用以下几个数据: 页面渲染时间 页面帧率 页面打开次数 页面异常率 页面崩溃率 有了以上几个数据,我们就可以根据它们来进行业务优化,

    1.4K30
    领券