Flutter TextField 的高度问题
示例
先来看一个例子:假设我们要做一个表单,左边是提示文字,右边是输入框

给出代码:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"$labelName",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Expanded(
child: TextField(
obscureText: true,
style: TextStyle(
fontSize: 16,
),
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "$hintText",
),
),
)
],
)

可以看到 输入框的高度显然有点太高了
问题解决
为 TextField 的 InputDecoration 填加 isDense 属性:
...
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: OutlineInputBorder(),
hintText: "$hintText",
isDense: true,
),
...
完成后就可以通过调节 contentPadding 的大小来设置输入框的内边距了

Flutter TextField 的高度问题的更多相关文章
- flutter textfield设置高度后内容区无法居中?
textfiled 设置高度后,内容永远无法居中,最后找到原因 decoration: 中有一个 contentPadding属性,设置这个属性对应的Padding值即可
- Flutter 修改TextField的高度,以及无边框圆角
修改TextField的高度可以通过decoration: InputDecoration的contentPadding进行修改,代码如下 new TextField( decoration: Inp ...
- Flutter:修改TextField的高度,以及无边框圆角
修改TextField的高度可以通过decoration: InputDecoration的contentPadding进行修改,代码如下 new TextField( decoration: Inp ...
- iOS 如何自定义UISearchBar 中textField的高度
iOS 如何自定义UISearchBar 中textField的高度 只需设置下边的方法就可以 [_searchBar setSearchFieldBackgroundImage:[UIImage i ...
- flutter TextField 高度问题(包括使用maxlines自适应高度以及改变textfield组件自定义高度)
先上代码. Container( color: Colors.blue, constraints: BoxConstraints( minHeight: 10, maxHeight: 20 ), ch ...
- flutter获取状态栏高度
import 'dart:ui'; MediaQueryData.fromWindow(window).padding.top 系统默认的appBar等高度 位于Dart Packages/flutt ...
- [Flutter] TextField 中只允许输入合法的小数
的Flutter的TextField中,我们可以通过设置inputFormatters来过滤和限制输入的内容. 下面是一个自定义的 TextInputFormatter,可以限制用户只能输入有效的整数 ...
- Flutter TextField详解
原文地址:https://www.jianshu.com/p/54419a143d70 实现TextField说简单也简单,说有坑,坑也不小,下面从易到难介绍一下使用 1.最简单的就是无参数调用构造方 ...
- Flutter——TextField组件(文本框组件)
TextField组件的常用属性: 属性 描述 maxLines 设置此参数可以把文本框改为多行文本框 onChanged 文本框改变的时候触发的事件 decoration hintText 类似 h ...
- Flutter TextField 文本输入框的基本属性及详解
TextField 文本输入框 源码分析: const TextField({ Key key, this.controller, // 控制正在编辑文本 this.focusNode, // 获取键 ...
随机推荐
- linux服务器webdriver启动Chrome浏览器失败
碰到一个linux启动Chrome浏览器失败的奇怪问题,查了很久资料,问题终于解决了,特此记录一下 我的情况是,一开始运维给了一个deploy的账号去部署项目UI自动化测试项目,项目是运行没有问题的, ...
- 【MySQL】LEFT JOIN 踩坑
一.问题发现: 主查询功能发现两条一样的记录,但是审批状态不一样,一个已通过,一个待审核 主表付款表: CREATE TABLE `pur_or_payment` ( `id` int(11) NOT ...
- 【H5】15 表单 其四 数据发送
一旦在客户端上验证了表单数据,就可以提交表单了. 并且,由于我们在上一篇文章中介绍了验证,因此我们准备提交! 本文着眼于用户提交表单时会发生什么-数据将流向何处,以及到达表单后如何处理? 我们还将研究 ...
- 【SpringBoot】08 探索配置方式 Part4 优先加载的路径
配置文件的加载位置: SpringBoot启动会扫描i以下为位置的applicationproperties 或者application.yml文件,作为springboot的默认配置文件 优先级从高 ...
- 《Python数据可视化之matplotlib实践》 源码 第一篇 入门 第三章
图3.1 import matplotlib as mpl import matplotlib.pyplot as plt import numpy as np mpl.rcParams['font. ...
- NVIDIA公司推出的GPU运行环境下的机器人仿真环境(NVIDIA Isaac Gym)—— 到底实现了什么功能,意义价值又是什么???
相关内容: NVIDIA公司推出的GPU运行环境下的机器人仿真环境(NVIDIA Isaac Gym)的安装--强化学习的仿真训练环境 ================================ ...
- java多线程之ReentrantLock详解
1.背景 2.基本语法 public class Test01 { // 定义锁 static ReentrantLock reentrantLock = new ReentrantLock(); p ...
- flex 左右布局-----在手机端,当左侧宽度固定,右侧宽度自适应时,右侧会超出浏览器窗口的问题解决方案
废话不多说:直接上代码解决问题: 父级: .parent { display: flex; flex-flow: row; } 子级: .left-child { width:100px; } .ri ...
- 判断数据是否是数组 返回true或false
/** * 判断数据是否是数组 返回true或false * @param {obj,array} data //obj or array */ export function isType ...
- HTB-Permx靶机笔记
Permx靶机笔记 概述 permx靶机是HTB的简单靶机,这台靶机整体考验渗透人员的信息搜集能力,可以收只有信息搜集的快速,才能快速拿到它的flag. 整体是比较简单的靶机 靶机连接:https:/ ...