flutter笔记汇总
这个组件属性很多。。。
先看一下吧
const TextField({
Key key,
TextEditingController controller, //输入框的控制器
FocusNode focusNode, //控制输入框是否获得焦点
InputDecoration decoration: const InputDecoration(), //设置输入框的外观
TextInputType keyboardType, //键盘类型
TextInputAction textInputAction, //回车按钮的类型
TextCapitalization textCapitalization: TextCapitalization.none, // 键盘大小写
TextStyle style, //文本样式
StrutStyle strutStyle,
TextAlign textAlign: TextAlign.start, //水平方向对齐方式
TextAlignVertical textAlignVertical, //垂直方向对齐方式
TextDirection textDirection, //文本书写顺序
bool readOnly: false, //是否只读
bool showCursor, //是否显示光标
bool autofocus: false, //是否自动获得焦点
bool obscureText: false, //是否隐藏正在输入的文本，内容显示为圆点
bool autocorrect: true, //是否自动修正
int maxLines: 1, //输入框的最大行数
int minLines, //最小行数
bool expands: false, //是否填充父级
int maxLength, //文本最大长度
bool maxLengthEnforced: true, //超过文本最大长度是否限制输入
ValueChanged onChanged, //输入文本时的回调
VoidCallback onEditingComplete, //完成输入时触发（按回车）
ValueChanged onSubmitted, //完成输入时触发，接收当前输入文本为参数
List inputFormatters, //指定输入格式
bool enabled, //是否可用
double cursorWidth: 2.0, //光标宽度
Radius cursorRadius, //光标圆角
Color cursorColor, //光标颜色
Brightness keyboardAppearance, //键盘色调，只在ios上有效
EdgeInsets scrollPadding: const EdgeInsets.all(20.0), //当输入框获得焦点并且有一部分被滚动出屏外时，将自动滚动。
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
bool enableInteractiveSelection, //是否允许选中
GestureTapCallback onTap, //点击回调
InputCounterWidgetBuilder buildCounter,
ScrollController scrollController,
ScrollPhysics scrollPhysics
})
先来一个最简单的demo
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
)
)
)
);
}
}
屏幕中间一条线...点击获得焦点。
image.png
接下来挨个属性看一下
1、controller
输入框文本发生改变时触发，但不限于这个功能。
先看demo
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: TextFieldDemo()
)
);
}
}
class TextFieldDemo extends StatefulWidget {
@override
_TextFieldState createState() => new _TextFieldState();
}
class _TextFieldState extends State {
TextEditingController _controller = TextEditingController();
@override
void initState() {
_controller.addListener(() {
print(_controller.text);
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Center(
child: TextField(
controller: _controller
)
);
}
}
和前几个组件类似，但不相同，不只是一个状态值，而是有一个controller，并且在initState里监听文本变化。
是不是感觉和onChange重复了，继续往下看，除了监听文本变化，还有一些其他的功能。
设置默认值
initState方法修改如下
@override
void initState() {
_controller.text = 'default value'; //输入框的默认值
_controller.addListener(() {
print(_controller.text);
});
super.initState();
}
清空输入框
initState方法修改如下
@override
void initState() {
_controller.text = 'default value';
_controller.addListener(() {
print(_controller.text);
_controller.clear();
});
super.initState();
}
当输入框获得焦点时，会触发_controller这个时候调用clear方法会清空输入框。
selection
将initState方法修改如下：
void initState() {
_controller.text = 'default value';
_controller.selection = TextSelection(
baseOffset: 3,
extentOffset: 5,
affinity: TextAffinity.upstream,
isDirectional: true
);
_controller.addListener(() {
print(_controller.text);
});
super.initState();
}
baseOffset和extentOffset配对使用，demo中的写法为从文本中第四个和第五个字符为选中状态。
另外的两个我不知道是干啥的。。。
2、focusNode
焦点控制
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: FocusNodeDemo(),
),
);
}
}
class FocusNodeDemo extends StatefulWidget {
@override
_FocusNodeState createState() => new _FocusNodeState();
}
class _FocusNodeState extends State {
FocusNode focusNode1 = new FocusNode();
FocusNode focusNode2 = new FocusNode();
FocusScopeNode focusScopeNode;
@override
Widget build(BuildContext context) {
return Container (
child: Column(
children: [
TextField(
//关联focusNode1
focusNode: focusNode1,
),
TextField(
//关联focusNode2
focusNode: focusNode2,
),
RaisedButton(
child: Text('移动焦点到1'),
onPressed: () {
//没有输入框获得焦点时初始值为null
if (focusScopeNode == null) {
focusScopeNode = FocusScope.of(context);
}
//focusNode1获得焦点
focusScopeNode.requestFocus(focusNode1);
//focusNode1和focusNode2焦点状态
print(focusNode1.hasFocus);
print(focusNode2.hasFocus);
}
),
RaisedButton(
child: Text('移动焦点到2'),
onPressed: () {
//没有输入框获得焦点时初始值为null
if (focusScopeNode == null) {
focusScopeNode = FocusScope.of(context);
}
//focusNode2获得焦点
focusScopeNode.requestFocus(focusNode2);
//focusNode1和focusNode2焦点状态
print(focusNode1.hasFocus);
print(focusNode2.hasFocus);
}
),
RaisedButton(
child: Text('隐藏键盘'),
onPressed: () {
//focusNode1和focusNode2失去焦点
focusNode1.unfocus();
focusNode2.unfocus();
}
),
RaisedButton(
child: Text('焦点状态'),
onPressed: () {
//focusNode1和focusNode2焦点状态
print(focusNode1.hasFocus);
print(focusNode2.hasFocus);
},
)
]
)
);
}
}
image.png
输入框的焦点通过FocusNode和focusScopeNode控制，focusScopeNode可以通过focusScope.of方法来获取初始值，这个方法不会让元素获得焦点，focusScopeNode.requestFocus方法可以让元素获得焦点。focusNode还有一个unFocus方法，可以让输入框失去焦点，另外focusNode还有一个hasFocus属性，输入框获得焦点时为true，失去焦点时为false。
3、decoration
先看一下constructor
const InputDecoration({
Widget icon, //输入框前的图标
String labelText, //与placeholder类似，当输入框获得焦点时会缩小到左上角
TextStyle labelStyle, //labelText的字体样式
String helperText, //帮助类型文字提示在输入框下方，默认为灰色
TextStyle helperStyle, //helperText的文字样式
String hintText, //相当于html里的placeholder，当设置了labelText时输入框未获得焦点时不显示，获得焦点之后labelText缩小后会显示
TextStyle hintStyle, //hintText文字样式
int hintMaxLines, //hintText最大行数，如果文本超出这个最大行数后边会显示为...
String errorText, //错误提示，和helperText位置相同，默认为红色
TextStyle errorStyle, //helperText的文字样式
int errorMaxLines, //errorText的最大行数，超出部分显示为...
bool hasFloatingPlaceholder: true, //为false时，当输入框获得焦点labelText不会缩小到左上角，而是消失
bool isDense,
EdgeInsetsGeometry contentPadding, //输入框内边距
Widget prefixIcon, //输入框前缀图标
Widget prefix, //输入框前缀
String prefixText, //输入框前缀文本
TextString prefixStyle, //前缀样式
Widget suffixIcon, //后缀图标
Widget suffix, //后缀文本
String suffixText, //后缀
TextStyle suffixStyle, //后缀样式
Widget counter, //输入框右下方组件
String counterText, //输入框右下方文本
TextStyle counterStyle, //右下方文本样式
bool filled, //是否填充
Color fillColor, //填充色（相当于背景色）
Color focusColor, //
Color hoverColor, //鼠标移入的填充色
InputBorder errorBorder, //错误时的边框
InputBorder focusedBorder, //获得焦点时边框
InputBorder focusedErrorBorder, //错误并获得焦点时的边框
InputBorder disabledBorder, //禁用时的边框
InputBorder enabledBorder, //可用时的边框
InputBorder border, //边框
bool enabled: true, //是否可用
String semanticCounterText,
bool alignLabelWithHint
})
这里的属性都很简单，没啥细说的而且有很多都是重复的，只不过是在不同状态下和不同位置。没注释的暂时还没整明白是干啥的。
4、keyboardType
输入框获得焦点时弹出键盘的类型。
number、phone、url、datetime、multiline、emailAddress、numberWithOptions()、visiblePassword、text
看着挺多，其实有好几个都是重复的，可能是为了语义化。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
keyboardType: TextInputType.number,
)
)
)
);
}
}
image.png
5、textInputAction
回车按钮的类型
continueAction、done、emergencyCall、go、join、newline、next、route、search、send、unspecified、none、previous
unspecified和newline是回车，none和previous不知道干啥，android和ios都报错不支持，其他的值是什么按钮就显示什么
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
textInputAction: TextInputAction.send,
)
)
)
);
}
}
image.png
6、textCapitalization
配置平台键盘如何选择大写或小写键盘，只有文本键盘有效。
none：默认键盘
characters：大写键盘
sentences：第一个字母大写
words：单词首字母大写
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
textCapitalization: TextCapitalization.words
)
)
)
);
}
}
image.png
7、style
文本样式，这里不说了，之前的笔记有介绍。
8、strutStyle
这个也不说了，看之前的笔记flutter笔记（二）-----hello world和文本组件Text、TextSpan
9、textAlign
对齐方式flutter笔记（二）-----hello world和文本组件Text、TextSpan
10、TextAlignVertical
垂直方向的对齐方式，有三个值
top、center、bottom
和css的vertical-align一个作用
11、textDirection
文本的书写顺序，不详细介绍了看之前的笔记flutter笔记（二）-----hello world和文本组件Text、TextSpan
12、readOnly
是否只读，值为boolean类型，为true时只读，但是输入框可获得焦点。
13、showCursor
是否显示光标，值为boolean类型。
14、autofocus
是否自动获得焦点。
15、obscureText
是否密文，一般用于密码输入。
16、autocorrect
是否自动修正输入的文本，默认为true。
17、maxLines
输入框的最当行数，默认为1，为null时不做限制。
18、minLines
输入框最小行数，和maxLines同时使用，并且不能大于maxLines。
19、expands
是否调整输入框高度，以填充父级，maxLines和minLines必须为null。
20、maxLength
文本最大长度，输入框右下角有长度显示。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
maxLength: 20
)
)
)
);
}
}
image.png
21、maxLengthEnforced
文本长度超过最大长度是否限制输入，为false时不禁止输入，但是输入框会变红。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
maxLength: 5,
maxLengthEnforced: false
)
)
)
);
}
}
image.png
22、onChanged
文本输入回调
23、onEditingComplete
文本输入完成时的回调，即按回车时的回调。
24、onSubmitted
文本输入完成的回调，当前输入的文本为参数。
25、inputFormatters
指定输入文本的格式，需要引入package:flutter/services.dart，值是List类型，可以有多个配置。
BlacklistingTextInputFormatter：黑名单
WhitelistingTextInputFormatter：白名单
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
inputFormatters: [
BlacklistingTextInputFormatter(RegExp("[abc]"))
],
)
)
)
);
}
}
将abc添加黑名单，禁止输入。
26、enabled
是否可用，为false时不可用，输入框不能获得焦点。
27、cursorWidth
光标宽度，默认是2.0。
28、cursorRadius
光标圆角。
29、cursorColor
光标颜色
30、keyboardAppearance
键盘色调，Brightness.light为亮色，Brightness.dark为暗，只在ios上有效。
31、scrollPadding
当输入框获得焦点，并有一部分滚动到可视区之外时，自动将输入框滚动到可视区之内。
32、dragStartBehavior
好像和拖动有关，还没整明白怎么用。
33、enableInteractiveSelection
输入的文本属否允许选中，默认为true，为false时不能选中。
34、onTap
点击的回调。
35、buildCounter
没看明白怎么用。
36、scrollController & scrollPhysics
这两个放一起是因为不知道怎么用，看文档scrollController是创建一个滚动控制器，scrollPhysics是对滚动的物理特性做处理，应该是可以控制滚动惯性、滚动回弹的东西。