示例


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

给出代码:

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",
),
),
)
],
)

可以看到 输入框的高度显然有点太高了

问题解决


TextFieldInputDecoration 填加 isDense 属性:

...
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: OutlineInputBorder(),
hintText: "$hintText",
isDense: true,
),
...

完成后就可以通过调节 contentPadding 的大小来设置输入框的内边距了

Flutter TextField 的高度问题的更多相关文章

  1. flutter textfield设置高度后内容区无法居中?

    textfiled 设置高度后,内容永远无法居中,最后找到原因 decoration: 中有一个 contentPadding属性,设置这个属性对应的Padding值即可

  2. Flutter 修改TextField的高度,以及无边框圆角

    修改TextField的高度可以通过decoration: InputDecoration的contentPadding进行修改,代码如下 new TextField( decoration: Inp ...

  3. Flutter:修改TextField的高度,以及无边框圆角

    修改TextField的高度可以通过decoration: InputDecoration的contentPadding进行修改,代码如下 new TextField( decoration: Inp ...

  4. iOS 如何自定义UISearchBar 中textField的高度

    iOS 如何自定义UISearchBar 中textField的高度 只需设置下边的方法就可以 [_searchBar setSearchFieldBackgroundImage:[UIImage i ...

  5. flutter TextField 高度问题(包括使用maxlines自适应高度以及改变textfield组件自定义高度)

    先上代码. Container( color: Colors.blue, constraints: BoxConstraints( minHeight: 10, maxHeight: 20 ), ch ...

  6. flutter获取状态栏高度

    import 'dart:ui'; MediaQueryData.fromWindow(window).padding.top 系统默认的appBar等高度 位于Dart Packages/flutt ...

  7. [Flutter] TextField 中只允许输入合法的小数

    的Flutter的TextField中,我们可以通过设置inputFormatters来过滤和限制输入的内容. 下面是一个自定义的 TextInputFormatter,可以限制用户只能输入有效的整数 ...

  8. Flutter TextField详解

    原文地址:https://www.jianshu.com/p/54419a143d70 实现TextField说简单也简单,说有坑,坑也不小,下面从易到难介绍一下使用 1.最简单的就是无参数调用构造方 ...

  9. Flutter——TextField组件(文本框组件)

    TextField组件的常用属性: 属性 描述 maxLines 设置此参数可以把文本框改为多行文本框 onChanged 文本框改变的时候触发的事件 decoration hintText 类似 h ...

  10. Flutter TextField 文本输入框的基本属性及详解

    TextField 文本输入框 源码分析: const TextField({ Key key, this.controller, // 控制正在编辑文本 this.focusNode, // 获取键 ...

随机推荐

  1. vue table表格实现无缝滚动 鼠标进入可悬停

    <el-table ref="table" :data="tableData" :header-cell-style="{background: ...

  2. js 做树形数组查询筛选功能

    对二级菜单进行搜索查询: watch: { librarySearch(val) { if(val == '') { this.libraryFiles = this.libraryFilesAll ...

  3. AI知识库这事儿FastGPT是专业的

    在搭建AI知识库这事儿上,有不少成熟的框架,我推荐使用FastGPT.这篇文章笔者就使用过的两款平台做个比较,FastGPT和百度千帆平台. 1. 为什么要搭建知识库 随着企业的运营,企业的私有数据越 ...

  4. Intent 显示与隐式了解认识

    显示Intent 用于精确匹配,指定跳转目标 1.在intent构造函数中调用 Intent intent = new Intent(this,XX.class); 2.调用意图对象的setClass ...

  5. 【Vue】单元格合并,与动态校验

    效果要求 先看需求效果: 多个数据授权项,配置的时候,业务名称大多数都是一样的,需要合并单元格处理 在elementUI组件文档中有说明[合并列行]: https://element.eleme.io ...

  6. 【爬虫】Java爬取省市县行政区域统计数据

    前言 网上看了好几个Python爬虫来爬取省市县行政区域统计 官网除了省市县以外,还有区,街道,居委村委层级 https://zhuanlan.zhihu.com/p/512852193 所以自己用J ...

  7. 【转载】 Tensorflow如何直接使用预训练模型(vgg16为例)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_44633882/artic ...

  8. openAI的仿真环境Gym Retro的Game Integration——新游戏融合(将retro中没有融合的ROM游戏加入其中)

    官方原地址: https://retro.readthedocs.io/en/latest/integration.html#integration-files =================== ...

  9. [CEOI2010 day2] tower 题解

    前言 题目链接:洛谷. 题意简述 你要对一个数组排序,满足 \(a_{i + 1} \leq a_i + D\),其中 \(D\) 是给定的常数.求方案数对 \(10^9+9\) 取模的结果. 题目分 ...

  10. 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究

    本文,我们将一起探讨探讨,如下所示的一个卡片 Hover 动画,应该如何实现: 这个效果的几个难点: 鼠标移动的过程中,展示当前卡片边缘的 border 以及发光效果: 效果只出现在鼠标附近?这一块的 ...