Flutter Widget之TextField

Widget:https://flutter.io/docs/development/ui/widgets
TextField:https://docs.flutter.io/flutter/material/TextField-class.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class TextFieldDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _TextFieldDemoPageState();
}

class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
@override
Widget build(BuildContext context) {
final controller = TextEditingController();
controller.addListener(() {
print('input ${controller.text}');
});
return Scaffold(
appBar: AppBar(
title: Text('TextField Demo'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
// child: TextFieldBuilder.buildCustomTextField(controller),
child: Column(
children: TextFieldBuilder.buildDecorationTextField(controller),
)
),
)
);
}
}

class TextFieldBuilder {
static Widget buildBasicTextField(TextEditingController controller) {
return TextField(
controller: controller,
);
}

static Widget buildCustomTextField(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, //是否禁用
);
}

static List<Widget> buildDecorationTextField(TextEditingController controller) {
return <Widget>[
TextField(
controller: controller,
decoration: InputDecoration(fillColor: Colors.blue.shade100, filled: true, labelText: 'Hello'),
),
SizedBox(height: 20),
//显示placeholder
TextField(
controller: controller,
decoration: InputDecoration(fillColor: Colors.blue.shade100, filled: true, hintText: 'Hello', errorText: 'error'),
),
SizedBox(height: 20),
//显示icon
TextField(
controller: controller,
decoration: InputDecoration(
fillColor: Colors.blue.shade100,
filled: true,
helperText: 'help',
prefixIcon: Icon(Icons.local_airport),
suffixText: 'airport'),
),
SizedBox(height: 20),
//圆角矩形边框
TextField(
controller: controller,
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)
)),
),
//改变装饰线颜色,参考:https://stackoverflow.com/questions/49600139/how-to-change-textfield-underline-color
SizedBox(height: 20),
Theme(
data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue),
child: TextField(
controller: controller,
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)
)
),
),
),
SizedBox(height: 20),
//改变边框的粗细
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(
controller: controller,
decoration: InputDecoration.collapsed(hintText: 'hello'),
),
)
];
}

}

Flutter Widget TextField Password

Flutter Widget TextField Decoration

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :