Flutter输入框换行后自适应高度

Flutter输入框换行后输入框高度随之增加

效果

请添加图片描述
请添加图片描述

设计思想

通过TextEditingController在build中监听输入框,输入内容后计算输入框高度然后自定义适合的值,并且改变外部容器高度达到自适应高度的目的

参考代码

//以下代码中的值只适用于案例,实际情况还需改为自己需要的实际值

//自定义输入框高度
 double inputH=25; 

 
  Widget build(BuildContext context) {
    _textEditingController.addListener(() {
      String textvalue=_textEditingController.text;
      final textStyle = TextStyle(fontSize: 16,fontWeight: FontWeight.bold);

      final textPainter = TextPainter(
        text: TextSpan(text:textvalue, style: textStyle),
        textDirection: TextDirection.ltr,
      );
      textPainter.layout(maxWidth: 260 * Global.widthX); // 减去/加上的数值根据自己需求调整,下同
      setState(() {
        if(textPainter.height<=25.0){ //只有一行的情况
          this.inputH=25.0;
        }else if(25.0<textPainter.height && textPainter.height<=95){ //大于一行小于等于4行的情况
          this.inputH=textPainter.height;
        }else if(textPainter.height>=95){ //大于四行后固定高度,输入框内容滑动展示
          this.inputH=95.0;
        }
      });
     
    });
	return Container();

}

Widget _bottom(){
 return SizedBox(
	height:inputH*Global.heightY+80*Global.heightY,
	child:Container(
		//输入框外部容器高度
		 constraints: BoxConstraints.tightFor(width: Global.screenWidth,height:inputH*Global.heightY+50*Global.heightY),
		 child: Container(
            constraints: BoxConstraints(
                maxHeight: 100.0,
                maxWidth: 265 * Global.widthX,
                minHeight: 20*Global.heightY,
                minWidth: 265 * Global.widthX),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(  //边框,颜色以及宽度
                // color: Color(0xFFFCCCCCC),
                width: 1.0,
                color: Colors.black12
              ),
              borderRadius: BorderRadius.circular(10.0),
            ),
            margin: EdgeInsets.fromLTRB(9* Global.widthX, 0, 0, 0),
            padding: EdgeInsets.fromLTRB(5* Global.widthX,0, 0, 0),
            child: Center(

              child: TextField(
                // focusNode: _focusNode1,
                maxLines: null,
                // maxLength: 170,
                keyboardType: TextInputType.multiline,
                controller: _textEditingController,
                // textAlign: TextAlign.center,
                textAlignVertical: TextAlignVertical.center,
                decoration: InputDecoration.collapsed(

                  hintText: _hintText,

                ),
                
              ),
            ),
          ),
		 
	)
);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/428215.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智能果园风吸杀虫灯的优势

TH-FD2随着农业科技的不断进步&#xff0c;果园管理也迎来了革命性的变革。智能果园风吸杀虫灯作为一种新型的果园管理工具&#xff0c;以其独特的优势&#xff0c;正逐渐受到广大果农的青睐。 一、智能果园风吸杀虫灯的工作原理 智能果园风吸杀虫灯利用害虫的趋光性&#xff0…

贪心 Leetcode 134 加油站

加油站 Leetcode 134 学习记录自代码随想录 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油…

MonkeyRunner在自动化测试里的应用场景!

MonkeyRunner是Android提供的一个自动化测试工具&#xff0c;主要用于对Android设备或模拟器进行功能和压力测试。以下是一些MonkeyRunner在自动化测试中的应用场景及实例代码&#xff1a; 基本操作测试 点击屏幕上的特定位置或元素。 模拟滑动和手势操作。 发送按键事件。 …

指针习题二

使用函数指针实现转移表 #include <stdio.h> int add(int a, int b) {return a b; } int sub(int a, int b) {return a - b; } int mul(int a, int b) {return a * b; } int div(int a, int b) {return a / b; } int main() {int x, y;int input 1;int ret 0;int(*p[…

Linux学习:初识Linux

目录 1. 引子&#xff1a;1.1 简述&#xff1a;操作系统1.2 学习工具 2. Linux操作系统中的一些基础概念与指令2.1 简单指令2.2 ls指令与文件2.3 cd指令与目录2.4 文件目录的新建与删除指令2.5 补充指令1&#xff1a;2.6 文件编辑与拷贝剪切2.7 文件的查看2.8 时间相关指令2.9 …

服务器硬件基础知识

1. 服务器分类 服务器分类 服务器的分类没有一个统一的标准。 从多个多个维度来看服务器的分类可以加深我们对各种服务器的认识。 N.B. CISC: complex instruction set computing 复杂指令集计算 RISC: reduced instruction set computer 精简指令集计算 EPIC: explicitly p…

ViTMatte:Boosting image matting with pretrained plain vision transformers

自sora之后&#xff0c;我也要多思考&#xff0c;transformer的scaling law在各个子领域中是不是真的会产生智能&#xff0c;conv的叠加从resnet之后就讨论过&#xff0c;宽或者深都没有办法做到极限&#xff0c;大概sam这种思路是最好的实证。 1.introduction 引入了ViT adap…

浅谈一个CTF中xss小案例

一、案例代码 二、解释 X-XSS-Protection: 0&#xff1a;关闭XSS防护 之后get传参&#xff0c;替换过滤为空&#xff0c;通过过滤保护输出到img src里面 三、正常去做无法通过 因为这道题出的不严谨所以反引号也是可以绕过的 正常考察我们的点不在这里&#xff0c;正常考察…

深入理解快速排序算法:从原理到实现

目录 1. 引言 2. 快速排序算法原理 3. 快速排序的时间复杂度分析 4. 快速排序的应用场景 5. 快速排序的优缺点分析 5.1 优点&#xff1a; 5.2 缺点&#xff1a; 6. Java、JavaScript 和 Python 实现快速排序算法 6.1 Java 实现&#xff1a; 6.2 JavaScript 实现&#…

ARM64汇编02 - 寄存器与指令基本格式

最近的文章可能会有较多修改&#xff0c;请关注博客哦 异常级别 ARMv8处理器支持4种异常等级&#xff08;Exception Level&#xff0c;EL&#xff09;。 EL0 为非特权模式&#xff0c;用于运行应用程序&#xff0c;其他资源访问受限&#xff0c;权限不够。 EL1 为特权模式&…

栈的OJ一小道-->Leetcode有效的括号

20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 这道题我们乍一看可能会选择暴力遍历法,但这题我们可以选择栈,这样可以大大降低我们的时间复杂度.这题要求非常简单 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的相同类型…

Qt 简约美观的动画 摆钟风格 第十季

&#x1f60a; 今天给大家分享一个摆钟风格的加载动画 &#x1f60a; 效果如下: 最近工作忙起来了 , 后续再分享其他有趣的加载动画吧. 一共三个文件 , 可以直接编译运行 //main.cpp #include "LoadingAnimWidget.h" #include <QApplication> #include <Q…

山西电力市场日前价格预测【2024-02-24】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-02-24&#xff09;山西电力市场全天平均日前电价为562.29元/MWh。其中&#xff0c;最高日前电价为1026.21元/MWh&#xff0c;预计出现在18:30。最低日前电价为337.39元/MWh&#xff0c;预计…

[LeetBook]【学习日记】寻找和为指定数字的连续数字

题目 文件组合 待传输文件被切分成多个部分&#xff0c;按照原排列顺序&#xff0c;每部分文件编号均为一个 正整数&#xff08;至少含有两个文件&#xff09;。传输要求为&#xff1a;连续文件编号总和为接收方指定数字 target 的所有文件。请返回所有符合该要求的文件传输组…

【音视频开发】使用ffmpeg实现多个视频合成一个视频(按宫格视图)

先上结果 环境 硬件&#xff1a;通用PC 系统&#xff1a;Windows 测试有效 软件&#xff1a;ffmpeg 解决 0、命令 ffmpeg.exe -i input1.mp4 -i input2.mp4 -i input3.mp4 -i input4.mp4 -filter_complex "[0:v]scaleiw/2:ih/2,pad2*iw:2*ih[a]; [1:v]scaleiw/2:ih/2…

ArcGIS学习(九)选址分析

ArcGIS学习(九)选址分析 本任务给大家带来的案例是租房选址分析。选址分析是我们平时经常接触到的分析场景。概括起来说,选址分析就是根据选址条件来确定哪些区域满足我们的选址要求。首先,先来看看我们这个案例的场景和基础数据。我们以某个城市某一租客的租房选址为例。…

深入理解Docker

文章目录 1 Docker理论1.1 背景知识1.2 是什么1.3 Docker基本三要素1.4 镜像原理1.5 安装教程 2 Docker常用命令2.0 防火墙相关命令2.1 镜像命令2.2 容器命令2.3 进阶命令 3. 实战之Docker部署springboot项目步骤一&#xff1a;Springboot项目配置1.1 添加docker的maven依赖1.2…

vue项目中使用antvX6新手教程,附demo案例讲解(可拖拽流程图、网络拓扑图)

前言&#xff1a; 之前分别做了vue2和vue3项目里的网络拓扑图功能&#xff0c;发现对antv X6的讲解博客比较少&#xff0c;最近终于得闲码一篇了&#xff01; 需求&#xff1a; 用户可以自己拖拽节点&#xff0c;节点之间可以随意连线&#xff0c;保存拓扑图数据后传给后端&…

力扣61:旋转链表

题目 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2输出&#xff1a;[4,5,1,2,3] 示例 2&#xff1a; 输入&#xff1a;head [0,1,2], k 4输出&#xff1a;…

【硬件相关】Mellanox网络配置及参数优化

文章目录 一、前言1、硬件配置2、网卡信息 二、驱动安装1、驱动介绍2、软件架构2.1、mlx4 VPI Driver2.2、mlx5 Driver 3、驱动安装3.1、常规安装3.2、驱动编译方法一方法二 4、RDMA配置 三、交换机配置四、mlnx-tools管理工具1、软件安装2、软件使用ibdev2netdeva、说明b、用法…