flutter-表单

最新推荐文章于 2024-05-14 21:56:50 发布

夜丶陌颜

最新推荐文章于 2024-05-14 21:56:50 发布

阅读量2.6k

点赞数 1

分类专栏： flutter 文章标签： flutter android 前端

本文链接：https://blog.csdn.net/c_liufeng/article/details/121921469

版权

flutter 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

Switch - 开关

安卓

安卓属性	类型	说明
value	bool	开关得值，一般与状态字段绑定
onChanged	Function	开关状态变更时调用
activeColor	Colors	开关开启时得圆圈颜色
activeTrackColor	Colors	开关开启时得轨道颜色
inactiveThumbColor	Colors	开关关闭时得圆圈颜色
inactiveTrackColor	Colors	开关关闭时得轨道颜色

ios

ios属性	类型	说明
value	bool	开关得值，一般与状态字段绑定
onChanged	Function	开关状态变更时调用
activeColor	Colors	开关开启时得轨道颜色
trackColor	Colors	开关未开启时得轨道颜色

checkbox - 复选框

checkbox 属性

属性	类型	说明
value	bool	复选框的值
onChanged	Function	复选框状态变更时调用
activeColor	Colors	选中时，复选框背景的颜色
checkColor	Colors	选中时，复选框中对号的颜色

checkboxListTile 多选列表

title（标题）
subtitle（子标题）

Radio - 单选框

radio 属性

属性	类型	说明
value	bool	开关得值，一般与状态字段绑定
onChanged	Function	开关状态变更时调用
groupValue	选则组的值

RadioListTile - 单选列表

属性：与radio 属性一致

TextField - 输入框

属性	类型	说明
autofocus	bool	是否获取焦点
keyboardType	TextInputType	键盘类型
obscureText	bool	设置为密码框
onChanged	Function	内容更改时自动调用-value
decoration.labelText	InputDecoration	标题
decoration.hintText	InputDecoration	提示文字-placeholder
maxLines	int	显示行数-文本域

日历

CalendarDatePicker(日历选择器)
initialCalendarMode
- DatePickerMode.day
- DatePickerMode.year\
showDatePicker(日期选择器)
- initialDatePickerMode（year| day）
- initialEntryMode （calendar | input）
showTimePicker（时间选择器）

表单 - Form

使用步骤
- 创建表单Form，并以GlobalKey 作为唯一性标识
- 添加带验证逻辑的TextFormField到Form 中
- 创建按钮以验证和提交表单
Form （表单容器）
- 创建表单唯一键：final GlobalKey<FormState> _formState = GlobalKey<FormState>();
- 验证表单：_formState.currentState.validate()
- 提交表单: _formState.currentState.save()
- 重置表单 _formState.currentState.reset()
textFormField(输入框)
- 与TextField 的区别：必须在Form 内使用 & 带有验证器
- validator（验证器）
- obscureText（密码框）
- onSaved
  - 设置表单字段的值
  - 在表单的save()方法之后执行

代码示例

在这里插入图片描述

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';


class Body extends StatefulWidget {
  Body({Key key}) : super(key: key);

  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  bool _switchValue = false;
  int _gender = 1;
  String _name = "";
  final GlobalKey<FormState> _formState = GlobalKey<FormState>();
  String _phone = '';

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: [
          ListTile(
            title: Text('安卓 Switch 组件基本使用'),
            subtitle: Row(
              children: [
                Container(
                  child: Switch(
                    value: _switchValue,
                    activeColor: Colors.amberAccent, // 选中圆圈颜色
                    activeTrackColor: Colors.pink,   // 选中轨道颜色
                    inactiveTrackColor: Colors.blue, // 未选中轨道颜色
                    inactiveThumbColor: Colors.cyan, // 未选中圆圈颜色 
                    onChanged: (bool value) {
                      setState(() {
                        _switchValue = value;
                      });
                    },
                  ),
                ),
                Container(
                  child: Text('${_switchValue ? '选中': '未选中'}'),
                )
              ]
            )
          ),
          ListTile(
            title: Text('ios Switch 组件基本使用'),
            subtitle: Row(
              children: [
                Container(
                  child: CupertinoSwitch(
                    value: _switchValue,
                    activeColor: Colors.amberAccent, // 选中轨道颜色
                    trackColor: Colors.blue, // 未选中轨道颜色
                    onChanged: (bool value) {
                      setState(() {
                        _switchValue = value;
                      });
                    },
                  ),
                ),
                Container(
                  child: Text('${_switchValue ? '选中': '未选中'}'),
                )
              ]
            )
          ),
          ListTile(
              title: Text('checkbox 复选框'),
              subtitle: Row(
                children: [
                  Container(
                    child: Checkbox(
                      value: this._switchValue,
                      activeColor: Colors.amberAccent, // 选中背景颜色
                      checkColor: Colors.blue, // 选中对号颜色
                      onChanged: (bool value) {
                        setState(() {
                          _switchValue = value;
                        });
                      },
                    ),
                  ),
                  Container(
                    child: Text('${_switchValue ? '选中': '未选中'}'),
                  )
                ]
              )
            ),
          CheckboxListTile(
              secondary: Icon(Icons.account_box, size: 50),
              value: this._switchValue,
              activeColor: Colors.amberAccent, // 选中背景颜色
              checkColor: Colors.blue, // 选中对号颜色
              onChanged: (bool value) {
                setState(() {
                  _switchValue = value;
                });
              },
              title: Text('checkboxListTile'),
              subtitle: Text('checkboxListTile 选中listTile '),
              selected: _switchValue,  // 整个选中
            ),
          ListTile(
              title: Text('Radio 单选'),
              subtitle: Row(
                children: [
                  Text('男'),
                  Radio(
                    value: 1,
                    groupValue: _gender,
                    onChanged: (value) {
                      print(value);
                      setState(() {
                        _gender = value;
                      });
                    }
                  ),
                  Text('女'),
                  Radio(
                    value: 2,
                    groupValue: _gender,
                    onChanged: (value) {
                      print(value);
                      setState(() {
                        _gender = value;
                      });
                    }
                  )
                ]
              )
            ),
          RadioListTile(
              value: 1,
              groupValue: _gender,
              onChanged: (value) {
                print(value);
                setState(() {
                  _gender = value;
                });
              },
              title: Text('男-RadioListTile'),
              subtitle: Text('我是那男人'),
              secondary: Icon(Icons.arrow_forward_ios, size: 20),
              selected: _gender == 1,
              selectedTileColor: Colors.cyan[100], // 选中背景
          ),
          RadioListTile(
            value: 2,
            groupValue: _gender,
            onChanged: (value) {
              print(value);
              setState(() {
                _gender = value;
              });
            },
            title: Text('女-RadioListTile'),
            subtitle: Text('我是那女人'),
            secondary: Icon(Icons.arrow_forward_ios, size: 20),
            selected: _gender == 2,
            selectedTileColor: Colors.cyan[100], // 选中背景
         ),
          TextField(
            obscureText: true,
            autofocus: false, // 自动获取焦点
            keyboardType: TextInputType.phone, // 键盘类型
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.person), // 图标
              labelText: '用户名',
              hintText: '请输入用户名',
              // 提示文字样式
              hintStyle: TextStyle(
                color: Colors.green,
                fontSize: 20,
              ),
              // 获取焦点时边框样式
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.lightBlueAccent,
                )
              ),
              // 默认边框样式
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.yellow,
                )
              ),
            ),
            // maxLines: 2, // 行数
            maxLength: 10, //字数
            onChanged: (value) {
              setState(() {
                _name = value;
              });
            },
          ),
          Divider(color: Colors.blue),
          Form(
            key: _formState,
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(
                    hintText: '手机号',
                  ),
                  validator: (value) {
                    RegExp reg = new RegExp(r'^\d{11}$');
                    if(!reg.hasMatch(value)) {
                      return '手机号格式不正确';
                    }
                    return null;
                  },
                  onSaved: (value) {
                    _phone = value;
                  },
                ),
              ],
            ),
          ),
          // 表单提交
          Container(
            child: ElevatedButton(
              child: Text('提交'),
              onPressed: () {
                if(_formState.currentState.validate()) {
                  print('保存成功');
                  // 提交表单，触发sava后会调用TextFormField 中的onSaved 方法
                  _formState.currentState.save();
                }
              },
            )
          )
        ],
      ),
    );
  }
}

夜丶陌颜

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
flutter-表单

Switch - 开关安卓安卓属性类型说明valuebool开关得值，一般与状态字段绑定onChangedFunction开关状态变更时调用activeColorColors开关开启时得圆圈颜色activeTrackColorColors开关开启时得轨道颜色inactiveThumbColorColors开关关闭时得圆圈颜色inactiveTrackColorColors开关关闭时得轨道颜色iosios属性类型
复制链接

扫一扫