Java教程
Flutter 表单
本文主要是介绍Flutter 表单，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
表单 -- Switch
Switch value：开关的值，一般与状态字段绑定 onChanged：开关状态变更时调用 activeColor：开关开启时的圆圈颜色 activeTrackColor：开关开启时的轨道颜色 inactiveThumbColor：开关关闭时的圆圈颜色 inactiveTrackColor：开关关闭时的轨道颜色
CupertinoSwitch（iOS 风格的开关） import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Switch'),
),
body: const SwitchDemo(),
);
}
}
class SwitchDemo extends StatefulWidget {
const SwitchDemo({Key? key}) : super(key: key);
@override
State<SwitchDemo> createState() => _SwitchDemoState();
}
class _SwitchDemoState extends State<SwitchDemo> {
// Switch开关的选中状态
bool _switchValue = false;
@override
Widget build(BuildContext context) {
return ListView(
children: [
// Switch 简单用法
ListTile(
leading: Switch(
value: _switchValue,
onChanged: (bool value) {
setState(() {
_switchValue = value;
});
},
),
title: Text('基本用法：${_switchValue == true ? '选中' : '未选中'}'),
),
// Switch 属性介绍
ListTile(
leading: Switch(
value: _switchValue,
onChanged: (bool value) {
setState(() {
_switchValue = value;
});
},
// 开关打开时圆圈的颜色
activeColor: Colors.green,
// 开关打开时轨道的颜色
activeTrackColor: Colors.green[100],
// 开关关闭时圆圈的颜色
inactiveThumbColor: Colors.yellow,
// 开关关闭时轨道的颜色
inactiveTrackColor: Colors.yellow[100],
),
title: Text('修改属性：${_switchValue == true ? '选中' : '未选中'}'),
),
// iOS 风格的开关
ListTile(
leading: CupertinoSwitch(
value: _switchValue,
onChanged: (bool value) {
setState(() {
_switchValue = value;
});
},
// 开关圆圈的颜色
thumbColor: Colors.red,
// 开关打开时轨道的颜色
activeColor: Colors.red[100],
// 开关关闭时轨道的颜色
trackColor: Colors.yellow,
),
title: Text('iOS 风格的开关：${_switchValue == true ? '选中' : '未选中'}'),
),
],
);
}
}
表单 -- Checkbox
Checkbox value：复选框的值，取值共3个：true, false, null（tristate 取值为 true 时） onChanged：复选框状态更改时调用 activeColor：选中时，复选框背景的颜色 checkColor：选中时，复选框中对号的颜色
CheckboxListTile title：标题 subtitle：子标题
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Checkbox Demo'),
),
body: const CheckboxDemo(),
);
}
}
class CheckboxDemo extends StatefulWidget {
const CheckboxDemo({Key? key}) : super(key: key);
@override
State<CheckboxDemo> createState() => _CheckboxDemoState();
}
class _CheckboxDemoState extends State<CheckboxDemo> {
bool _apple = true;
bool _pear = false;
bool _banana = false;
bool _wakeup = false;
@override
Widget build(BuildContext context) {
return ListView(
children: [
ListTile(
leading: Checkbox(
value: _apple,
// 取值可能为空
onChanged: (bool? val) {
setState(() {
_apple = val!;
});
},
),
title: Text('苹果，状态：$_apple'),
),
ListTile(
leading: Checkbox(
value: _pear,
// 取值可能为空
onChanged: (bool? val) {
setState(() {
_pear = val!;
});
},
),
title: Text('大鸭梨，状态：$_pear'),
),
ListTile(
leading: Checkbox(
value: _banana,
// 取值可能为空
onChanged: (bool? val) {
setState(() {
_banana = val!;
});
},
// 选中时，复选框的背景颜色
activeColor: Colors.yellow,
// 选中时，钩子的颜色
checkColor: Colors.red,
),
title: Text('香蕉，状态：$_banana'),
),
// timeDilation 会让动画效果慢下来
CheckboxListTile(
title: const Text('Animate Slowly'),
value: timeDilation != 1.0,
onChanged: (bool? value) {
setState(() {
timeDilation = value! ? 10.0 : 1.0;
});
},
secondary: const Icon(Icons.hourglass_empty),
),
CheckboxListTile(
value: _wakeup,
onChanged: (bool? val) {
setState(() {
_wakeup = val!;
});
},
// 主标题
title: const Text('7:00'),
// 子标题
subtitle: const Text('起床上学啦！'),
// 图标
secondary: const Icon(Icons.alarm),
// 选中时的背景色
activeColor: Colors.green,
// 选中时钩子的颜色
checkColor: Colors.red,
// 选中时，图标和文本也用 activeColor 重新渲染
selected: _wakeup,
),
],
);
}
}
表单 -- Radio
Radio（单选框） value：开关的值，一般与状态字段绑定 onChanged：开关状态变更时调用 groupValue：选择组的值
RadioListTile（单选列表） value：开关的值，一般与状态字段绑定 onChanged：开关状态变更时调用 groupValue：选择组的值
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Radio Demo'),
),
body: const RadioDemo(),
);
}
}
class RadioDemo extends StatefulWidget {
const RadioDemo({Key? key}) : super(key: key);
@override
State<RadioDemo> createState() => _RadioDemoState();
}
class _RadioDemoState extends State<RadioDemo> {
dynamic gender;
@override
Widget build(BuildContext context) {
return ListView(
children: [
Row(
children: [
const Text('男'),
Radio(
value: 1,
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value;
});
},
),
const Text('女'),
Radio(
value: 2,
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value;
});
},
),
],
),
RadioListTile(
value: 1,
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value;
});
},
title: const Text('男'),
subtitle: const Text('male'),
secondary: const Icon(Icons.person),
),
RadioListTile(
value: 2,
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value;
});
},
title: const Text('女'),
subtitle: const Text('female'),
secondary: const Icon(Icons.person),
// 选中的颜色
activeColor: Colors.yellow,
// 选中时，文本和按钮会用 activeColor 渲染
selected: gender == 2,
),
],
);
}
}
表单 -- TextField
属性： autofocus：是否获取焦点 keyboardType：键盘类型 obsureText：设置为密码框 decoration：样式修饰 onChanged：内容更改时自动调用 - value labelText：标题 hintText：提示文字 - placeholder maxLines：显示行数 - 文本域
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('TextField Demo'),
),
body: const TextFieldDemo(),
);
}
}
class TextFieldDemo extends StatefulWidget {
const TextFieldDemo({Key? key}) : super(key: key);
@override
State<TextFieldDemo> createState() => _TextFieldDemoState();
}
class _TextFieldDemoState extends State<TextFieldDemo> {
String phone = '';
String password = '';
String description = '';
_register() {
print('phone: $phone'); // phone: 12365412569
print('password: $password'); // phone: 12365412569
print('description: $description'); // description: srttg tutu edghh
}
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(10),
child: ListView(
children: [
// 手机号
TextField(
autofocus: true,
keyboardType: TextInputType.phone,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.mobile_screen_share),
labelText: '手机号',
hintText: '请输入手机号',
hintStyle: TextStyle(
color: Colors.pink,
fontSize: 14,
),
// 聚焦时边框的样式
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
// 默认边框样式
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.yellow,
),
),
),
maxLength: 11,
onChanged: (value) {
setState(() {
phone = value;
});
},
),
// 密码
TextField(
// 隐藏文本
obscureText: true,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.code_outlined),
labelText: '密码',
hintText: '请输入密码',
),
onChanged: (value) {
setState(() {
password = value;
});
},
),
// 文本域
TextField(
keyboardType: TextInputType.text,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: '简介',
hintText: '请简要介绍一下自己',
),
maxLines: 3,
onChanged: (value) {
setState(() {
description = value;
});
},
),
// 按钮
Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
child: ElevatedButton(
child: const Text('提交'),
onPressed: () {
_register();
},
),
),
],
),
);
}
}
表单 -- 日历
CalendarDatePicker（日历选择器）
属性： initialCalendarMode DatePickerMode.day DatePickerMode.year
showDatePicker（日期选择器）
属性： initialDatePickerMode (year | day) initialEntryMode (calendar | input)
showTimePicker（时间选择器）
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Calendar Demo'),
),
body: const CalendarDemo(),
);
}
}
class CalendarDemo extends StatefulWidget {
const CalendarDemo({Key? key}) : super(key: key);
@override
State<CalendarDemo> createState() => _CalendarDemoState();
}
class _CalendarDemoState extends State<CalendarDemo> {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(15),
child: ListView(
children: [
_showDatePicker(context),
_showDatePickerForYear(context),
],
),
);
}
// 日期选择器
ElevatedButton _showDatePicker(context) {
return ElevatedButton(
onPressed: () {
showDatePicker(
context: context,
// 日期选择模式，取值为 day 或 year
initialDatePickerMode: DatePickerMode.day,
// 初始化选中日期
initialDate: DateTime.now(),
// 开始日期
firstDate: DateTime(2022, 5),
// 结束日期
lastDate: DateTime(2022, 12),
// 日历弹框样式，默认：calendar
initialEntryMode: DatePickerEntryMode.calendar,
// 当前日期
currentDate: DateTime.now(),
// 左上方提示
helpText: '日期选择器',
// 取消按钮文案
cancelText: '取消',
// 确认按钮文案
confirmText: '确定',
// 格式错误提示
errorFormatText: 'Input format error',
// 输入不在 first 与 last 之间日期提示
errorInvalidText: 'Out of date range',
// 输入框上方提示
fieldLabelText: '请输入日期',
// 输入框为空时内部提示
fieldHintText: '输入日期不能为空',
// 是否为根导航器
useRootNavigator: true,
// 设置不可选日期
selectableDayPredicate: (dateTime) {
if (dateTime == DateTime(2022, 10, 1)) {
return false;
}
return true;
});
},
child: const Text('showDatePicker'),
);
}
// 年份选择器
ElevatedButton _showDatePickerForYear(context) {
return ElevatedButton(
onPressed: () {
showDatePicker(
context: context,
// 初始化选中日期
initialDate: DateTime(2019, 1, 1),
// 开始日期
firstDate: DateTime(2002),
// 结束日期
lastDate: DateTime(2066),
// 当前日期
currentDate: DateTime.now(),
// 左上方提示
helpText: '年份选择器',
// 取消按钮文案
cancelText: '取消',
// 确认按钮文案
confirmText: '确认',
);
},
child: const Text('showYearPicker'),
);
}
}
表单 -- Form
使用步骤 （1）、创建表单 Form，并以 GlobalKey 作为唯一性标识 （2）、添加带验证逻辑的 TextFormField 到 Form 中 （3）、创建按钮以验证和提交表单
Form（表单容器）
必填属性： key: GlobalKey child：子组件 创建表单唯一键：final GlobalKey<FormState> _formKey = GlobalKey<FormState>(); 验证表单：_formKey.currentState.validate(); 提交表单：_formKey.currentState.save(); 重置表单：_formKey.currentState.reset();
TextFormField（输入框） 与 TextField 的区别：必须在 Form 内使用 & 带有验证器 validator：验证器 obscureText：密码框 onSaved： 设定表单字段的值 在表单的 save() 方法之后执行
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Form Demo'),
),
body: const FormStateDemo(),
);
}
}
class FormStateDemo extends StatefulWidget {
const FormStateDemo({Key? key}) : super(key: key);
@override
State<FormStateDemo> createState() => _FormStateDemoState();
}
class _FormStateDemoState extends State<FormStateDemo> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String _phone = '';
String _password = '';
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(20),
child: Column(
children: [
Form(
key: _formKey,
child: Column(
children: [
// 手机号
TextFormField(
decoration: const InputDecoration(
hintText: '手机号',
),
// 校验
validator: (value) {
print('手机号 value: $value');
RegExp reg = RegExp(r'^\d{11}$');
if (!reg.hasMatch(value!)) {
print('error');
return '手机号码输入有误！';
}
return null;
},
// 设定表单字段的值
onSaved: (value) {
print('_phone onSaved');
_phone = value!;
},
),
// 密码
TextFormField(
decoration: const InputDecoration(
hintText: '密码',
),
// 校验
validator: (value) {
print('密码 value: $value');
return value!.length < 6 ? '密码有误！' : null;
},
// 设定表单字段的值
onSaved: (value) {
print('_password onSaved');
_password = value!;
},
),
],
),
),
Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
print('提交成功！');
print('_formKey.currentState!.save() Before');
// 提交表单
_formKey.currentState!.save();
print('_formKey.currentState!.save() After');
print('_phone: $_phone');
print('_password: $_password');
}
},
child: const Text('提交'),
),
),
const SizedBox(
width: 20,
),
Expanded(
child: ElevatedButton(
onPressed: () {
_formKey.currentState!.reset();
},
child: const Text('重置'),
),
),
],
),
],
),
);
}
}
这篇关于Flutter 表单的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
Springboot应用的多环境打包入门11-23
-
Springboot应用的生产发布入门教程11-23
-
Python编程入门指南11-23
-
Java创业入门：从零开始的编程之旅11-23
-
Java创业入门：新手必读的Java编程与创业指南11-23
-
Java对接阿里云智能语音服务入门详解11-23
-
Java对接阿里云智能语音服务入门教程11-23
-
JAVA对接阿里云智能语音服务入门教程11-23
-
Java副业入门：初学者的简单教程11-23
-
JAVA副业入门：初学者的实战指南11-23
-
JAVA项目部署入门：新手必读指南11-23
-
Java项目部署入门：新手必看指南11-23
-
Java项目部署入门：新手必读指南11-23
-
Java项目开发入门：新手必读指南11-23
-
JAVA项目开发入门：从零开始的实用教程11-23
栏目导航
