截屏2022-07-27 16.25.32.png
1.TextField (新增 errorText)
截屏2022-07-27 12.54.14.png
import 'package:flutter/material.dart';
class ZFLTextFieldPage extends StatefulWidget {
@override
_ZFLTextFieldPageState createState() => _ZFLTextFieldPageState();
}
class _ZFLTextFieldPageState extends State {
var _userNameController = TextEditingController();
var _passWord = '';
var _passWord1 = '';
var errorText = '';
List focusNodes = [
new FocusNode(),
new FocusNode(),
new FocusNode(),
new FocusNode(),
new FocusNode(),
];
//
bool isLocalPage = true;//离开页面 焦点会消失。
@override
void initState() {
super.initState();
_userNameController.text = "初始值";
///可以处理其他的操作
focusNodes[0].addListener(() {
if(!focusNodes[0].hasFocus) {
if(isLocalPage == false) return;
}
});
focusNodes[1].addListener(() {
if(!focusNodes[1].hasFocus) {
if(isLocalPage == false) return;
}
});
focusNodes[2].addListener(() {
if(!focusNodes[2].hasFocus) {
if(isLocalPage == false) return;
}
});
focusNodes[3].addListener(() {
if(!focusNodes[3].hasFocus) {
if(isLocalPage == false) return;
}
});
}
@override
void dispose() {
super.dispose();
_dispose();
}
_dispose() {
for (int i = 0; i < focusNodes.length; i++) {
focusNodes[i].dispose();
}
}
@override
Widget build(BuildContext context) {
//光标没有位于最后的位置
_userNameController.selection = TextSelection.fromPosition(TextPosition(
affinity: TextAffinity.downstream,
offset: _userNameController.text.length));
//点击任意区域收键盘
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Scaffold(
appBar: AppBar(
title: Text('输入框'),
),
body: Container(
child: Column(
children: [
TextField(
decoration: InputDecoration(
hintText: '请输入用户名',
errorText: errorText,
filled: true,
border: OutlineInputBorder()),
focusNode: focusNodes[0],
autofocus: true,
controller: _userNameController,
onChanged: (value) {
setState(() {
_userNameController.text = value;
if (_userNameController.text == 'aofeilin') {
errorText = 'aofeilin错误啦';
}
});
},
onEditingComplete: () {
// focusNodes[0].unfocus();//焦点使用
FocusScope.of(context).requestFocus(focusNodes[1]);// 非焦点离开时直接使用
}),
SizedBox(
height: 10,
),
TextField(
obscureText: true,
focusNode: focusNodes[1],
decoration: InputDecoration(hintText: '密码'),
onChanged: (value) {
setState(() {
this._passWord = value;
});
},
onEditingComplete: () {
// focusNodes[1].unfocus();//焦点使用
FocusScope.of(context).requestFocus(focusNodes[2]); //非焦点离开时直接使用 替换监听焦点
},
),
TextField(
maxLines: 4,
focusNode: focusNodes[2],
onChanged: (value) {
setState(() {
this._passWord1 = value;
});
},
onEditingComplete: () {
// focusNodes[2].unfocus();//焦点使用
FocusScope.of(context).requestFocus(focusNodes[3]); //非焦点离开时直接使用 替换监听焦点
},
),
SizedBox(
height: 10,
),
TextField(
focusNode: focusNodes[3],
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: '用户名',errorText: errorText),
onChanged: (value) {
setState(() {
this._passWord1 = value;
if(this._passWord1 == 'aofeilin') {
errorText = '错误啦';
}
});
},
onEditingComplete: () {
// focusNodes[3].unfocus();//焦点使用
FocusScope.of(context).requestFocus(focusNodes[4]); //非焦点离开时直接使用 替换监听焦点
},
),
SizedBox(
height: 10,
),
TextField(
focusNode: focusNodes[4],
decoration: InputDecoration(
icon: Icon(Icons.add_a_photo),
// border: OutlineInputBorder(),
// labelText: '用户名'
),
onChanged: (value) {
setState(() {
this._passWord1 = value;
});
},
onEditingComplete: () {
focusNodes[4].unfocus();
},
)
],
),
),
),
);
}
}
2.选择框 CheckBox
截屏2022-07-27 14.10.44.png
import 'package:flutter/material.dart';
class ZFLCheckBoxPage extends StatefulWidget {
@override
_ZFLCheckBoxPageState createState() => _ZFLCheckBoxPageState();
}
class _ZFLCheckBoxPageState extends State {
bool isSelected = false;
bool isBoxListTitleSelected = false;
bool isCustomSelected = false;
bool isCustomSelected1 = false;
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text('选择框'),
),
body: Column(
children: [
checkBoxWidget(),
Divider(
height: 1,
),
checkBoxTitleWidget(),
Divider(
height: 1,
),
customCheckBoxCheckBoxWidget(),
Divider(
height: 1,
),
customCheckBoxCheckBoxWidget2()
],
),
),
);
}
customCheckBoxCheckBoxWidget() {
return InkWell(
child: Container(
padding: EdgeInsets.all(14),
child: Row(
children: [
ZFLCheckBoxWidget(
value: isCustomSelected,
width: 20,
height: 20,
),
SizedBox(
width: 10,
),
Text('软件开发11')
],
),
),
onTap: () {
isCustomSelected = !isCustomSelected;
setState(() {});
},
);
}
customCheckBoxCheckBoxWidget2() {
return InkWell(
child: Container(
padding: EdgeInsets.all(14),
child: Row(
children: [
ZFLCheckBoxWidget(
value: isCustomSelected1,
isCircle: false,
width: 20,
height: 20,
),
SizedBox(
width: 10,
),
Text('软件开发11')
],
),
),
onTap: () {
isCustomSelected1 = !isCustomSelected1;
setState(() {});
},
);
}
checkBoxWidget() {
return InkWell(
child: Row(
children: [
Checkbox(
activeColor: Colors.green,
value: isSelected, //选中
onChanged: (value) {
isSelected = value;
setState(() {});
},
),
Text('软件开发')
],
),
onTap: () {
isSelected = !isSelected;
setState(() {});
},
);
}
checkBoxTitleWidget() {
return CheckboxListTile(
activeColor: Colors.green,
value: isBoxListTitleSelected,
title: Text('白象'),
subtitle: Text('白象方便面'),
secondary: Icon(Icons.home),
onChanged: (value) {
isBoxListTitleSelected = value;
setState(() {});
});
}
}
class ZFLCheckBoxWidget extends StatefulWidget {
final bool value;
final double width;
final double height;
final bool isCircle;
ZFLCheckBoxWidget(
{Key key, this.value, this.width, this.height, this.isCircle = true})
: super(key: key);
@override
_ZFLCheckBoxWidgetState createState() => _ZFLCheckBoxWidgetState();
}
class _ZFLCheckBoxWidgetState extends State {
@override
Widget build(BuildContext context) {
return Container(
width: this.widget.width,
height: this.widget.height,
child: this.widget.isCircle == true
? widget.value
? Icon(
Icons.check_circle,
size: this.widget.width,
color: Colors.green,
)
: Icon(
Icons.panorama_fish_eye,
size: this.widget.width,
color: Colors.grey,
)
: widget.value
? Icon(
Icons.check_box,
size: this.widget.width,
color: Colors.green,
)
: Icon(
Icons.check_box_outline_blank,
size: this.widget.width,
color: Colors.grey,
));
}
}
3.单选按钮 Radio RadioListTile
截屏2022-07-27 14.47.47.png
import 'package:flutter/material.dart';
class ZFLRadioPage extends StatefulWidget {
@override
_ZFLRadioPageState createState() => _ZFLRadioPageState();
}
class _ZFLRadioPageState extends State {
int sexGroupValue = -1;
int schoolGroupValue = -2;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
Container(
padding: EdgeInsets.only(left: 30,top: 50),
child: Row(
children: [
Text('男'),
sexRadioWidget(1),
Text('女'),
sexRadioWidget(2),
],
),
),
Divider(height: 1,),
schoolRadioWidget(11),
Divider(height: 1,),
schoolRadioWidget(12),
Divider(height: 1,),
],
),
);
}
sexRadioWidget(value) {
return Radio(
value: value,
groupValue: sexGroupValue,
activeColor: Colors.green,
onChanged: (value) {
setState(() {
sexGroupValue = value;
});
});
}
schoolRadioWidget(value) {
return RadioListTile(value: value, groupValue: schoolGroupValue,title: Text('客厅'),
subtitle: Text('电视机'),
secondary:Icon(Icons.star),
onChanged: (value) {
setState(() {
schoolGroupValue = value;
});
});
}
}
4.提交信息
截屏2022-07-27 16.23.49.png
import 'package:flutter/material.dart';
class ZFLFormPage extends StatefulWidget {
@override
_ZFLFormPageState createState() => _ZFLFormPageState();
}
class _ZFLFormPageState extends State {
String username = '';
int groupValue = 1; //sex
String printStr = '';
List hobby = [
{"checked": true, "title": "吃饭"},
{"checked": false, "title": "睡觉"},
{"checked": true, "title": "写代码"}
];
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text('登记系统'),
),
bottomNavigationBar: submitWidget(),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: [
userWidget(), //用户输入框
sexWidget(), //性别
checkBoxWidget(),
Text('$printStr'),
],
),
),
),
);
}
userWidget() {
return TextField(
decoration: InputDecoration(hintText: '请输入用户信息'),
onChanged: (text) {
setState(() {
username = text;
});
},
onEditingComplete: () {
setState(() {});
},
onTap: () {},
);
}
sexWidget() {
return Row(
children: [
Text('男'),
Radio(
value: 1,
groupValue: groupValue,
onChanged: (value) {
setState(() {
groupValue = value;
});
}),
Text('女'),
Radio(
value: 2,
groupValue: groupValue,
onChanged: (value) {
setState(() {
groupValue = value;
});
}),
],
);
}
checkBoxWidget() {
return Expanded(
child: ListView.builder(
itemCount: hobby.length,
itemBuilder: (context, index) {
return Row(
children: [
Text('${hobby[index]['title']}'),
Checkbox(
value: hobby[index]['checked'],
onChanged: (value) {
setState(() {
hobby[index]['checked'] = value;
});
})
],
);
}),
);
}
submitWidget() {
String str = '';
// List list = hobby.where((element) => element['checked'] == true);
for (int i = 0; i < hobby.length; i++) {
if (hobby[i]['checked'] == true) {
str += '${hobby[i]['title']} ,';
}
}
return Container(
height: 70,
padding: EdgeInsets.all(10),
width: MediaQuery.of(context).size.width,
child: RaisedButton(
child: Text('提交信息'),
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
setState(() {
printStr =
'用户名:${this.username} \n 性别: ${groupValue == 1 ? '男' : '女'} \n 爱好:$str';
});
}),
);
}
}