截屏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<ZFLTextFieldPage> {
  var _userNameController = TextEditingController();
  var _passWord = '';
  var _passWord1 = '';
  var errorText = '';
  List<FocusNode> 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<ZFLCheckBoxPage> {
  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<ZFLCheckBoxWidget> {
  @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<ZFLRadioPage> {
  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<ZFLFormPage> {
  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';
            });

          }),
    );
  }
}