一、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(20), 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: 40, 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: 40), CheckboxListTile( value: this.flag, onChanged: (v){ setState(() { this.flag=v; }); }, title: Text('标题'), subtitle: Text('这是一个二级标题'), secondary: Icon(Icons.help), ) ], ) ); } }
来源:https://www.cnblogs.com/yiweiyihang/p/11534089.html