一、Flutter常用表单介绍:
CheckboxListTile、RadioListTile、SwitchListTile、Slide。
二、TextField:表单常见属性:
maxLines:设置此参数可以把文本框改为多行文本框
onChanged:文本框改变的时候触发的事件。
decoration:
hintText:类似html中的placeholder
border:配置文本框边框
OutlineInputBorder:配合使用
labelText:lable的名称
labelStyle:配置label的样式
obscureText:把文本框改为密码框
controller:controller结合TextEditingController()可以配置表单默认显示的内容。
三、Checkbox、CheckboxListTile多选框组件:
Checkbox常见属性:
value:true或者false
onChanged改变的时候触发的事件。
activeColor:选中的颜色、背景颜色
checkColor:选中的颜色、Checkbox里面对号的颜色。
CheckboxListTile常见属性:
value:true或者false
onChanged:改变的时候触发的事件。
activeColor:选中的颜色、背景颜色
title:标题
subtitle:二级标题。
secondary:配置图标或者图片。
selected:选中的时候文字颜色是否跟着改变。
TextField.dart
import 'package:flutter/material.dart';

class TextFieldDemoPage extends StatefulWidget {
TextFieldDemoPage({Key key}) : super(key: key); _TextFieldDemoPageState createState() => _TextFieldDemoPageState();
} class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
var _username=new TextEditingController(); //初始化的时候,给表单赋值:
var _password;
@override
void initState(){
super.initState();
_username.text="初始值";
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('表单演示页面'),
),
body: Padding(
padding: EdgeInsets.all(),
child: Column(
children: <Widget>[
// TextField(),
// SizedBox(height: 20),
// TextField(
// decoration: InputDecoration(
// hintText: "请输入搜索的内容",
// border: OutlineInputBorder()
// ),
// ),
// SizedBox(height: 20),
// TextField( //设置为多行文本框:
// maxLines: 4,
// decoration: InputDecoration(
// hintText: "多行文本框",
// border: OutlineInputBorder()
// ),
// ),
// SizedBox(height: 20),
// TextField(
// obscureText: true, //把文本框修改成密码框:
// decoration: InputDecoration(
// hintText: "密码框",
// border: OutlineInputBorder()
// ),
// ),
// SizedBox(height: 20),
// TextField(
// obscureText: true,
// decoration: InputDecoration(
// hintText: "labelText使用",
// border: OutlineInputBorder(),
// labelText: "用户名"
// ),
// ),
TextDemo(),
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: "labelText使用",
border: OutlineInputBorder(),
labelText: "密码"),
onChanged: (value){
setState(() {
this._password=value;
});
},
),
TextField(
decoration:
InputDecoration(icon: Icon(Icons.search), hintText: "请输入用户名"),
controller: _username,
onChanged: (value){
setState(() {
_username.text=value;
});
},
),
Container(
width: double.infinity,
height: ,
child: RaisedButton(
child: Text("登录"),
onPressed: (){
print(this._username.text);
print(this._password);
},
color: Colors.blue,
textColor: Colors.white,
),
)
],
),
),
);
}
} class TextDemo extends StatelessWidget {
const TextDemo({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Container(
child: TextField(
decoration:
InputDecoration(icon: Icon(Icons.people), hintText: "请输入用户名"),
),
);
}
}

CheckBox.dart

import 'package:flutter/material.dart';
class CheckBoxDemoPage extends StatefulWidget {
CheckBoxDemoPage({Key key}) : super(key: key); _CheckBoxDemoPageState createState() => _CheckBoxDemoPageState();
}
// CheckBox
class _CheckBoxDemoPageState extends State<CheckBoxDemoPage> {
var flag=true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text('CheckBox'),
),
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Checkbox(
value: this.flag,
onChanged: (v){
setState(() {
this.flag=v;
});
},
activeColor: Colors.red, )
],
),
Row(
children: <Widget>[
Text(this.flag?'选中':'未选中')
],
),
SizedBox(height: ),
CheckboxListTile(
value: this.flag,
onChanged: (v){
setState(() {
this.flag=v;
});
},
title: Text('标题'),
subtitle: Text('这是一个二级标题'),
secondary: Icon(Icons.help),
)
],
)
);
}
}

24Flutter中常见的表单有TextField单行文本框,TextField多行文本框、CheckBox、Radio、Switch的更多相关文章

  1. javascript中常见的表单验证项

    1.不能超过20个字符 <body> <form name=a onsubmit="return test()"> <textarea name=&q ...

  2. 在Tomcat中采用基于表单的安全验证

    .概述   (1)基于表单的验证 基于From的安全认证可以通过TomcatServer对Form表单中所提供的数据进行验证,基于表单的验证使系统开发者可以自定义用户的登陆页面和报错页面.这种验证方法 ...

  3. Javascript中的Form表单知识点总结

    Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...

  4. php中如何防止表单的重复提交

    在php中如何防止表单的重复提交?其实也有几种解决方法. 下面小编就为大家介绍一下吧.需要的朋友可以过来参考下 代码: <?php /* * php中如何防止表单的重复提交 * by www.j ...

  5. javascript中的常用表单事件用法

    下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...

  6. jquery.form插件中动态修改表单数据

    jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...

  7. 如何在.Net Core MVC中为动态表单开启客户端验证

    非Core中的请参照: MVC的验证 jquery.validate.unobtrusive mvc验证jquery.unobtrusive-ajax 参照向动态表单增加验证 页面引入相关JS: &l ...

  8. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  9. php中的form表单

    表单处理 表单的概念在生活中很常见,就像是问卷调查表一样,别人先把问卷发给你,你照着问卷的要求填写,完事过后再将填完的问卷发给别人,从而达到一个将别人需要的信息传递给别人的一种方式. 传统的网页大多数 ...

随机推荐

  1. find 查找文件的命令

    find顾名思义就是查找,Linux下find命令提供相当多的查找条件,可以在众多文件或目录下查找你想要的任何文件或目录. 语法: find filename 我当前目录下有aaa.txt和bbb.t ...

  2. java中创建对象的方式

    Java中有5种创建对象的方式,下面给出它们的例子还有它们的字节码 使用new关键字 } → 调用了构造函数 使用Class类的newInstance方法 } → 调用了构造函数 使用Construc ...

  3. pandas 4

    参考资料:https://mp.weixin.qq.com/s/QnxaOrvlWJn6Dr42Ic1CcQ 1  #只选取housing,loan,contac和poutcometest_data[ ...

  4. GITHUB下载源码方式

    从昨天开始就想着从GitHub上下载一个开源的Vue的实战项目,希望能从中学习更多的Vue的实用内容,结果搞了半天好不容易下载了,不知道怎么弄.然而,今天终于成功了,激动地我赶紧来记录一下.如何从Gi ...

  5. django命令行安装和卸载

    1. 在dos命令行中输入 pip 如下命令进行安装: 安装最新的版本的 Django 命令如下: pip install django 安装 指定版本的 Django 命令如下: pip insta ...

  6. TDOA 基础之 双曲线

    TDOA 的算法基础就是时间差,根据时间差换算出距离差,后面的数学理论知识就是双曲线交点问题. 双曲线方程是2次方程,解算曲线交点也就是两个2次方程求解. 首先看双曲线定义(百度百科): 双曲线(Hy ...

  7. python xlwt 设置单元格样式

    使用xlwt中的Alignment来设置单元格的对齐方式,其中horz代表水平对齐方式,vert代表垂直对齐方式. VERT_TOP = 0x00 上端对齐 VERT_CENTER = 0x01 居中 ...

  8. centos 安装mysql5.7.18.tar.gz

    1.解压mysql.tar.gz tar -zxvf mysql--linux-glibc2.-x86_64.tar.gz  2.添加mysql用户组和mysql用户,命令如下: groupadd m ...

  9. wangEditor编辑器从word粘贴公式

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  10. am335x system upgrade kernel emmc(十八)

    1      Scope of Document This document describes EMMC hardware design 2      Requiremen 2.1     Func ...