Flutter开发 13.Widget-TextField、Expanded、SafeArea

1. TextField

TextField用于文本输入，它提供了很多属性.

参数名	类型	说明
controller	TextEditingController	输入框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。
focusNode	FocusNode?	用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个句柄（handle）.
decoration	InputDecoration?	用于控制TextField的外观显示，如提示文本、背景颜色、边框等。
keyboardType	TextInputType?	当前输入框可输入的键盘类型，有很多的预置的枚举值可以用。text 文本输入键盘number 数字；会弹出数字键盘; phone 电话号码输入键盘; datetime日期输入键盘；streetAddress街道地址; 等等
autofocus	bool	是否自动获取焦点
textCapitalization	TextCapitalization	characters 默认为每个字符使用大写键盘;sentence 默认为每个句子的第一个字母使用大写键盘;word 默认为每个单词的第一个字母使用大写键盘;none 默认使用小写
style	TextStyle?	输入文本的样式
textAlign	TextAlign	输入框内编辑文本在水平方向的对齐方式
obscureText	bool	是否隐藏正在编辑的文本，如用于输入密码的场景等，默认文本内容会用“•”替换。
obscuringCharacter	String	obscureText开启隐藏文本后，输入的字符,用该字段指定的字符来替代.
maxLines	int?	输入框的最大行数，默认为1；如果为null，则无行数限制。
maxLength	int?	输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数.
maxLengthEnforcement	MaxLengthEnforcement?	当输入文本长度超过maxLength时如何处理，如截断、超出等
toolbarOptions	ToolbarOptions?	长按或鼠标右击时出现的菜单，包括 copy、cut、paste 以及 selectAll。
onChange	ValueChanged< String >?	输入框内容改变时的回调函数；注：内容改变事件也可以通过controller来监听。
onEditingComplete	VoidCallback?	输入框输入完成时触发，比如按了键盘的完成键.
onSubmitted	ValueChanged< String >?	输入框输入完成时触发，比如按了键盘的完成键
inputFormatters	List< TextInputFormatter >?	用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验。
enable	bool	如果为false，则输入框会被禁用，禁用状态不接收输入和事件

2. Flex和Expanded

引用官方的文档说明:
Flex组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的，它也可以和Expanded组件配合实现弹性布局。

Flex({...required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向List<Widget> children = const <Widget>[],
})

Flex继承自MultiChildRenderObjectWidget，对应的RenderObject为RenderFlex，RenderFlex中实现了其布局算法。

Expanded 只能作为 Flex 的孩子（否则会报错），它可以按比例“扩伸”Flex子组件所占用的空间。因为 Row和Column 都继承自 Flex，所以 Expanded 也可以作为它们的孩子。

3. SafeArea

对于各种刘海屏、IOS底部黑线这种可能会超出有效范围的展示情况，将其放到SafeArea组件中，可以避免这种情况发生。

4.实例演示

在当前测试工程目录下的lib目录下新建文件夹pages，然后新建一个Login.dart文件。
打开Login.dart文件编辑内容如下:

import 'package:flutter/material.dart';class Login extends StatefulWidget {const Login({Key? key}) : super(key: key);@overrideState<Login> createState() => _LoginState();
}class _LoginState extends State<Login> {final TextEditingController _textEditingControllerForName =TextEditingController();final TextEditingController _textEditingControllerForPwd =TextEditingController();@overridevoid initState() {_textEditingControllerForName.addListener(() {//可以监听输入变化});super.initState();}//登录按钮的点击事件void onClickLogin() {AlertDialog alertDialog = AlertDialog(title: const Text("登录按钮"),content: Text("用户名:" +_textEditingControllerForName.text +"; " +"密码:" +_textEditingControllerForPwd.text),);//显示一下已经输入的用户名和密码showDialog(context: context,builder: (BuildContext context) {return alertDialog;});}//注册按钮的点击事件void onClickRegist() {}@overrideWidget build(BuildContext context) {return SafeArea(child: Padding(padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),child: Column(children: [TextField(autofocus: true,keyboardType: TextInputType.text,controller: _textEditingControllerForName,decoration: const InputDecoration(labelText: "用户名",hintText: "输入手机号或邮箱地址",prefixIcon: Icon(Icons.person)),),TextField(autofocus: false,toolbarOptions: const ToolbarOptions(copy: false,cut: false,paste: false,selectAll: false), //不允许拷贝和粘贴obscureText: true, //隐藏输入字符obscuringCharacter: "#", //密码字符controller: _textEditingControllerForPwd,decoration: const InputDecoration(labelText: "密码",hintText: "输入登录密码",prefixIcon: Icon(Icons.lock)),),Container(margin: const EdgeInsets.only(top: 30),height: 40,width: double.infinity,child: ElevatedButton(onPressed: onClickLogin,child: const Text("登录"),),),Container(margin: const EdgeInsets.only(top: 10),height: 40,width: double.infinity,child: OutlinedButton(style: OutlinedButton.styleFrom(side: const BorderSide(width: 2,color: Color.fromARGB(255, 0, 195, 255),)),onPressed: onClickRegist,child: Row(mainAxisAlignment: MainAxisAlignment.center,children: const [Icon(Icons.app_registration,color: Color.fromARGB(255, 0, 195, 255),),Text("注册新账户",style: TextStyle(color: Color.fromARGB(255, 0, 195, 255),),)],),),),const Expanded(flex: 1, child: SizedBox()),const Text("Copyright: 爪爪课堂",style: TextStyle(color: Color.fromARGB(255, 138, 138, 138),),)]),),);}
}

在修改main.dart文件

import 'package:first_flutter_demo/pages/Login.dart';void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("登录"),),body: const Login())));
}

运行看一下效果：

当前例子中、如果我们不使用SafeArea底部的"Copyright: 爪爪课堂" 就会显示到黑线下边：

当我们输入密码时：

点击一下登录按钮，看一下我们取到的信息：

Flutter开发 13.Widget-TextField、Flex、Expanded、SafeArea相关推荐

Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
flutter使用Flex,Expanded时，约束问题(constraintsError)
文档链接:https://flutter.cn/docs/development/ui/layout/box-constraints Flex 在无边界约束条件下,不能将子 widget 的flex属 ...
Flutter学习笔记08-Padding Row Column Flex Expanded组件详解
学习视频地址:https://www.bilibili.com/video/BV1S4411E7LY?p=27&spm_id_from=pageDriver&vd_source=cee ...
Flutter开发实战高仿微信（二）发现页
Flutter开发实战高仿微信(二)发现页 Flutter开发实战高仿微信(二)发现页 1.1 微信发现页面简述 1.2 APP框架优化 1.2.1 配置APP Logo和启动图片 1.2.2 配 ...
Flutter 开发踩坑记录（干货总结）
Flutter 太好学了!BUG 真的太少了!issues 只有 5000 多!也就那么亿点!简单得我都枯了!毕竟每次遇到问题,???????? 都是直接去找群里的法佬.低调.Alex 等几位大佬(? ...
论Flutter开发如何改善套娃地狱问题
/ 今日科技快讯 / 近日,滴滴旗下自动驾驶公司宣布与广汽埃安新能源汽车有限公司达成战略合作.滴滴出行董事长兼CEO程维与广汽集团董事长曾庆洪,共同见证签约仪式. / 作者简介 / 本 ...
Flutter每周一个Widget系列
最近看了油管上的Flutter的Widget Of The Week 系列通俗易懂还可以练习下英语听力,给大家转发下本文会持续更新...(有链接的就是已经更新上去的) #1 Introducing ...
Flutter开发实战高仿微信（一）首页
Flutter开发实战高仿微信(一)首页 Flutter开发实战高仿微信(一)首页 flutter 开发微信项目 (一) 1. 开发HomePage页 2. 用到的知识点讲解 2.1 Bottom ...
Flutter一切皆widget但是不要将所有东西放入一个widget
本文主要介绍Flutter一切皆widget但是不要将所有东西放入一个widget 作为 Flutter 开发人员,我相信您在您的开发生活中至少听说过这句流行的句子:"**一切都是widge ...

Flutter开发 13.Widget-TextField、Flex、Expanded、SafeArea

目录

1. TextField

2. Flex和Expanded

3. SafeArea

4.实例演示

Flutter开发 13.Widget-TextField、Flex、Expanded、SafeArea相关推荐

最新文章

热门文章