Flutter学习笔记 Form表单

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_42215775/article/details/100999342

Form表单需要设置一个全局类型的GlobalKey，通过这个key获取表单对象

  GlobalKey<FormState> _formKey = new GlobalKey<FormState>();





//获取表单当前实例对象
_formKey.currentState;
//重置表单内容
_formKey.currentState.reset();
//验证表单内容，表单里面TextFiled等组件验证通过后才到达此步
_formKey.currentState.validate();
//保存表单内容
_formKey.currentState.save();

常用表单组件：

输入框(TextField)和表单输入框(TextFormField)
TextField:

const TextField({
    Key key,
    this.controller,
    this.focusNode,
    this.decoration = const InputDecoration(),
    TextInputType keyboardType,
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.strutStyle,
    this.textAlign = TextAlign.start,
    this.textAlignVertical,
    this.textDirection,
    this.readOnly = false,
    ToolbarOptions toolbarOptions,
    this.showCursor,
    this.autofocus = false,
    this.obscureText = false,
    this.autocorrect = true,
    this.maxLines = 1,
    this.minLines,
    this.expands = false,
    this.maxLength,
    this.maxLengthEnforced = true,
    this.onChanged,
    this.onEditingComplete,
    this.onSubmitted,
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection = true,
    this.onTap,
    this.buildCounter,
    this.scrollController,
    this.scrollPhysics,
  }) 

TextFormField:

TextFormField({
    Key key,
    this.controller,
    String initialValue,
    FocusNode focusNode,
    InputDecoration decoration = const InputDecoration(),
    TextInputType keyboardType,
    TextCapitalization textCapitalization = TextCapitalization.none,
    TextInputAction textInputAction,
    TextStyle style,
    StrutStyle strutStyle,
    TextDirection textDirection,
    TextAlign textAlign = TextAlign.start,
    bool autofocus = false,
    bool readOnly = false,
    ToolbarOptions toolbarOptions,
    bool showCursor,
    bool obscureText = false,
    bool autocorrect = true,
    bool autovalidate = false,
    bool maxLengthEnforced = true,
    int maxLines = 1,
    int minLines,
    bool expands = false,
    int maxLength,
    ValueChanged<String> onChanged,
    GestureTapCallback onTap,
    VoidCallback onEditingComplete,
    ValueChanged<String> onFieldSubmitted,
    FormFieldSetter<String> onSaved,
    FormFieldValidator<String> validator,
    List<TextInputFormatter> inputFormatters,
    bool enabled = true,
    double cursorWidth = 2.0,
    Radius cursorRadius,
    Color cursorColor,
    Brightness keyboardAppearance,
    EdgeInsets scrollPadding = const EdgeInsets.all(20.0),
    bool enableInteractiveSelection = true,
    InputCounterWidgetBuilder buildCounter,
  }) 

复选框(CheckBox)和下拉复选框(CheckboxListTile)

Row(
  children: <Widget>[
    Checkbox(
      activeColor: Colors.teal,
      value: _checkBoxValue1,
      onChanged: (bool val) {
        setState(() {
          _checkBoxValue1 = val;
        });
      },
    ),
    Checkbox(
      value: _checkBoxValue2,
      onChanged: (bool val) {
        setState(() {
          _checkBoxValue2 = val;
        });
      },
    ),
  ],
),

CheckboxListTile(
   title: Text('Title'),
   subtitle: Text('SubTitle'),
   secondary: Icon(Icons.local_cafe),
   value: _checkBoxValue1,
   onChanged: (bool val) {
     setState(() {
       _checkBoxValue1 = val;
     });
   },
   //将组件放置于相对文本何处
   controlAffinity: ListTileControlAffinity.leading,
 ),

Button:
FlatButton(文字按钮)
RaiseButton(凸起按钮)
IconButton(图标按钮)
PopupMenuButton(弹出菜单栏按钮)
FloatingActionButton(漂浮动作按钮)
RawMaterialButton(默认按钮)
DropdownButton(下拉选择按钮)
OutlineButton(边框按钮)

Text：
Text（文本）和RichText(富文本)

富文本具有复杂样式的文本显示

RichText(
  text: TextSpan(
    text: 'This',
    style: TextStyle(
      color: Colors.black,
      fontSize: 20.0,
    ),
    children: <TextSpan>[
      TextSpan(
        text: 'is',
        style: TextStyle(
          color: Colors.pinkAccent,
          fontSize: 30.0,
        ),
      ),
      TextSpan(
        text: 'RichText',
        style: TextStyle(
          color: Colors.yellow,
          fontSize: 30.0,
          fontStyle: FontStyle.italic,
        ),
      ),
      TextSpan(
        text: 'This',
        style: TextStyle(
          color: Colors.black,
          fontSize: 20.0,
        ),
      ),
    ],
  ),
),

扫描二维码关注公众号，回复： 7622720 查看本文章

Radio(单选按钮)

Radio(
 value: 0,
 groupValue: _groupValue,
 onChanged: (T) {
   setState(
     () {
       _groupValue = T;
     },
   );
 },
 activeColor: Colors.red,
),
Radio(
 value: 1,
 groupValue: _groupValue,
 onChanged: (T) {
   setState(
         () {
       _groupValue = T;
     },
   );
 },
 activeColor: Colors.blue,
),
Radio(
 value: 2,
 groupValue: _groupValue,
 onChanged: (T) {
   setState(
         () {
       _groupValue = T;
     },
   );
 },
 activeColor: Colors.green,
),

Slider(滑块)：

Slider(
  value: _value,
  label: '$_value',
  divisions: 10,
  onChanged: (double) {
    setState(() {
      _value = double.floorToDouble();
    });
  },
  min: 0.0,
  max: 100.0,
),

Switch(开关)：

Switch(
  value: _switchValue,
  onChanged: (bool val) {
    setState(() {
      _switchValue = val;
    });
  },
  activeColor: Colors.teal,
),

SwitchListTile:

SwitchListTile(
   title: Text('SwitchListTile'),
   subtitle: Text('SubTitle'),
   secondary: Icon(Icons.queue_music),
   value: _switchValue,
   onChanged: (bool val) {
     setState(() {
       _switchValue = val;
     });
   },
   activeColor: Colors.teal,
 ),