原文地址:https://www.jianshu.com/p/54419a143d70

实现TextField说简单也简单,说有坑,坑也不小,下面从易到难介绍一下使用

1.最简单的就是无参数调用构造方法:

TextField()
 
 

2.光有输入框还不行,还得获取其中的内容,所以需要传递controller:

import 'package:flutter/material.dart';

class TextFieldPage extends StatelessWidget {
Widget buildTextField(TextEditingController controller) {
return TextField(
controller: controller,
);
} @override
Widget build(BuildContext context) {
final controller = TextEditingController();
controller.addListener(() {
print('input ${controller.text}');
});
return Scaffold(
appBar: AppBar(
title: Text('TextField'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: buildTextField(controller),
),
);
}
}

我通过给controller添加通知来获取TextField的值,这种使用场景不一定合适,更多的时候是在点击按钮的时候直接读取controller.text的值

3.另外TextFiled还有一下小的属性:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; class TextFieldPage extends StatelessWidget {
Widget buildTextField(TextEditingController controller) {
return TextField(
controller: controller,
maxLength: 30,//最大长度,设置此项会让TextField右下角有一个输入数量的统计字符串
maxLines: 1,//最大行数
autocorrect: true,//是否自动更正
autofocus: true,//是否自动对焦
obscureText: true,//是否是密码
textAlign: TextAlign.center,//文本对齐方式
style: TextStyle(fontSize: 30.0, color: Colors.blue),//输入文本的样式
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式
onChanged: (text) {//内容改变的回调
print('change $text');
},
onSubmitted: (text) {//内容提交(按回车)的回调
print('submit $text');
},
enabled: true,//是否禁用
);
} @override
Widget build(BuildContext context) {
final controller = TextEditingController();
controller.addListener(() {
print('input ${controller.text}');
});
return Scaffold(
appBar: AppBar(
title: Text('TextField'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: buildTextField(controller),
),
);
}
}
 
 

4.接着我还能显示placeholder

decoration可以给TextField添加装饰

TextField(
decoration:
InputDecoration(fillColor: Colors.blue.shade100, filled: true, labelText: 'Hello'),
);

fillColor设置填充颜色,labelText设置标签文字,这个标签在没有输入的时候是占满输入框的,当输入聚焦以后,就会缩小到输入框左上角:

 
 
 
 
TextField(
decoration: InputDecoration(
fillColor: Colors.blue.shade100, filled: true, hintText: 'Hello', errorText: 'error'),
);

hintText就是普通的placeholder,输入后就不显示了,errorText是错误提示

 
 
 
 

5.还能显示一些别的装饰

import 'package:flutter/material.dart';

class TextFieldPage extends StatelessWidget {
Widget buildTextField() {
return TextField(
decoration: InputDecoration(
fillColor: Colors.blue.shade100,
filled: true,
helperText: 'help',
prefixIcon: Icon(Icons.local_airport),
suffixText: 'airport'),
);
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TextField'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: buildTextField(),
),
);
}
}
 
 

6.这些还不过瘾,我不喜欢这个安卓风格的下面的装饰线,我想变成圆角矩形的边框

import 'package:flutter/material.dart';

class TextFieldPage extends StatelessWidget {
Widget buildTextField() {
return TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
// borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//没什么卵效果
)),
);
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TextField'),
),
body: Container(
color: Colors.blue.shade100,
child: Padding(
padding: const EdgeInsets.all(30.0),
child: buildTextField(),
),
),
);
}
}
 
 

7.改变装饰线颜色

无论是下面的装饰线,还是矩形边框装饰线,对焦后显示的颜色,都是主题颜色的primaryColor,失去焦点以后就是黑色,这显然不能满足自定义的需求,但是通过各种努力发现,改变边框颜色很困难,最后发现了这个答案:https://stackoverflow.com/questions/49600139/how-to-change-textfield-underline-color

所以正确的设置边框颜色的方式是这样的:

import 'package:flutter/material.dart';

class TextFieldPage extends StatelessWidget {
Widget buildTextField() {
return Theme(
data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue),
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
// borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//没什么卵效果
)),
),
);
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TextField'),
),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: buildTextField(),
),
);
}
}
 
 

8.改变边框的粗细

这些TextField的decoration彻底不能满足要求了,需要重构成这种方式:


import 'package:flutter/material.dart'; class TextFieldPage extends StatelessWidget {
Widget buildTextField() {
return Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
height: 60.0,
decoration: new BoxDecoration(
color: Colors.blueGrey,
border: new Border.all(color: Colors.black54, width: 4.0),
borderRadius: new BorderRadius.circular(12.0)),
child: new TextFormField(
decoration: InputDecoration.collapsed(hintText: 'hello'),
),
);
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TextField'),
),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: buildTextField(),
),
);
}
}
 
 

InputDecoration.collapsed可以禁用装饰线,而是使用外面包围的Container的装饰线

Flutter TextField详解的更多相关文章

  1. Flutter 布局详解

    本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步讲解该如何去进行布局. 1. 简介 在介绍Flutter布局之前,我们得先了解Flutter中的一些布局相关 ...

  2. Flutter 动画详解(一)

    本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍 动画对于App来说,非常的重要.很多App,正是因为有了动画,所以才 ...

  3. Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

  4. Flutter之Container详解

    1 基本内容1.1 继续关系Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget &g ...

  5. Flutter完整开发实战详解

    Flutter完整开发实战详解(一.Dart语言和Flutter基础) Flutter完整开发实战详解(二. 快速开发实战篇) Flutter完整开发实战详解(三. 打包与填坑篇)

  6. 【Flutter】功能型组件之对话框详解

    前言 对话框本质上也是UI布局,通常一个对话框会包含标题.内容,以及一些操作按钮,为此,Material库中提供了一些现成的对话框组件来用于快速的构建出一个完整的对话框. 接口描述 // 1. Ale ...

  7. flutter系列之:flutter中常用的Stack layout详解

    [toc] 简介 对于现代APP的应用来说,为了更加美观,通常会需要用到不同图像的堆叠效果,比如在一个APP用户背景头像上面添加一个按钮,表示可以修改用户信息等. 要实现这样的效果,我们需要在一个Im ...

  8. Flutter 2.2 更新详解

    Flutter 2.2 版已正式发布!要获取新版本,您只需切换到 stable 渠道并更新目前安装的 Flutter,或前往 flutter.cn/docs/get-started 从头开始安装. 虽 ...

  9. flutter系列之:flutter中常用的GridView layout详解

    目录 简介 GridView详解 GridView的构造函数 GridView的使用 总结 简介 GridView是一个网格化的布局,如果在填充的过程中子组件超出了展示的范围的时候,那么GridVie ...

随机推荐

  1. bugzilla权限说明

    admin:Administrators权限   bz_canusewhineatothers:可定期向其它用户发送有关bug的邮件   bz_canusewhines: 用户在这个组,才能向其发送上 ...

  2. java通过url读取网络图片

    使用java.net读取网络文件 import java.io.BufferedInputStream; import java.io.FileOutputStream; import java.io ...

  3. Backpack II

    Description There are n items and a backpack with size m. Given array A representing the size of eac ...

  4. php 程序执行时间检测

    我们有的时经常需要做程序的执行时间执行效率判断.大理石平台检定规程 实现的思路如下: <?php //记录开始时间 //记录结整时 // 开始时间  减去(-)  结束时间  得到程序的运行时间 ...

  5. imagick的简单使用

    原文:https://blog.csdn.net/wulove52/article/details/78376142 PHP建图通常都用GD库,因为是内置的不需要在服务器上额外安装插件,所以用起来比较 ...

  6. Linux 的磁盘格式化、挂载、磁盘检验、df、du、fdisk、free命令的使用

    df:列出文件系统的整体磁盘使用量du:检查磁盘空间使用量fdisk:用于磁盘分区 free:查看内存占用情况 一.df命令列出系统的整体磁盘使用量 df命令参数功能:检查文件系统的磁盘空间占用情况. ...

  7. 洛谷 P1966 火柴排队 题解

    归并排序 很玄学的一道题目,用另类的方法求出逆序对的数量就可以AC 我的思路是这样的: 按照题目,输入数据用两个数组a,b储存, 同时,用另外两个数组c,d分别对应前面两个a,b储存, 就是前面两个的 ...

  8. LOJ575. 「LibreOJ NOI Round #2」不等关系 [容斥,分治FFT]

    LOJ 思路 发现既有大于又有小于比较难办,使用容斥,把大于改成任意减去小于的. 于是最后的串就长成这样:<<?<?<??<<<?<.我们把一段连续的& ...

  9. if后的判断条件

    转自https://blog.csdn.net/lxn18392641463/article/details/78321080 先说明原因.这里不只是有代码规范的问题,还有汇编语言的问题,要知道为什么 ...

  10. BAT 定时将多个本地文件同步到共享目录

    copy.bat 具体执行脚本,需要修改共享目录访问用户名,密码,同步的文件类型 list.txt   前面为本地文件夹,后面为共享目录,中间以”,”进行分割 附件地址: https://files. ...