一、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. Linux网络编程综合运用之MiniFtp实现(八)

    上节中实现了"USER"和"PASS"命令,如下: 事实上FTP是有很多命令组成的,如果就采用上面的这种方法来实现的话,就会有很多if...else if语句, ...

  2. P1273 有线电视网[分组背包+树形dp]

    题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树的内部节点. 从转播站到转播站以及从 ...

  3. 0019SpringBoot使用异步任务(多线程)与定时任务

    SpringBoot开启异步任务只需要两步配置: 1.在主类上加上注解@EnableAsync开启异步功能 2.在service层的方法上加上注解@Async指定调用方法时是异步的 SpringBoo ...

  4. 并发编程大师系列之:wait/notify/notifyAll/condition

    1. wait().notify()和notifyAll()方法是本地方法,并且为final方法,无法被重写. 2. 调用某个对象的wait()方法能让当前线程阻塞,并且当前线程必须拥有此对象的mon ...

  5. 带有EXE参数的启动

    (一).先制作一个带启动参数的EXE文件. 步骤:            1.定义全局私有变量:private string[] s = new string[1];  //这里为了简单起见,只做一个 ...

  6. IntelliJ IDEA使用教程一 介绍&安装&配置

    http://blog.csdn.net/nextyu/article/details/47206015 全套

  7. spark读文件写mysql(java版)

    package org.langtong.sparkdemo; import com.fasterxml.jackson.databind.ObjectMapper; import org.apach ...

  8. Linux操作系统常用命令合集——第三篇-系统管理操作(25个命令)

    1.whoami [命令作用] 显示当前登录有效用户名称 [命令语法]  whoami    [选项] [常用选项] 无 [参数说明] 用户名称 [命令示例] 显示当前登录有效用户名称 # whoam ...

  9. splay 1296 营业额统计

    有一个点超时,确实是个很简单的splay#include<cstdio> #include<iostream> using namespace std; int n,shu[1 ...

  10. divisors 数学

    divisors 数学 给定\(m\)个不同的正整数\(a_1, a_2,\cdots, a_m\),请对\(0\)到\(m\)每一个\(k\)计算,在区间\([1, n]\)里有多少正整数是\(a\ ...