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

吃可爱长大的小学妹 提交于 2020-04-04 06:56:37
一、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),
          )
        ],
      )
    );
  }
}

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!