Flutter中的表单组件

发布于 25 天前 作者 phonegap100 34 次浏览 最后一次编辑是 25 天前 来自 分享

Flutter中常见的表单有TextField单行文本框,TextField多行文本框、CheckBox、Radio、Switch CheckboxListTile、RadioListTile、SwitchListTile、Slide.

一、TextField文本框组件

TextField表单常见属性:

属性 描述
maxLines 设置此参数可以把文本框改为多行文本框
onChanged 文本框改变的时候触发的事件
decoration hintText 类似html中的placeholderborder 配置文本框边框 OutlineInputBorder配合使用labelText lable的名称labelStyle 配置lable的样式
obscureText 把文本框框改为密码框
controller controller 结合TextEditingController()可以配置表单默认显示的内容
TextField(
             maxLines: 10,
             // obscureText: true,
             decoration: InputDecoration(               
               hintText: "密码框",      
               border: OutlineInputBorder()         
             )              
)
String _username=TextEditingController();

void initState() {
   // TODO: implement initState
   super.initState();
   _username.text='这是文本框初始值';
}
TextField(
             controller: _username,
             onChanged: (value){
               // print(value);
               setState(() {
                  this._username.text=value; 
               });
             },  
             decoration: InputDecoration(               
               hintText: "请输入您的内容",               
             ),
             
)

二、Checkbox、CheckboxListTile多选框组件

Checkbox常见属性:

属性 描述
value true或者false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
checkColor 选中的颜色、Checkbox里面对号的颜色

CheckboxListTile常见属性:

属性 描述
value true或者false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
title 标题
subtitle 二级标题
secondary 配置图标或者图片
selected 选中的时候文字颜色是否跟着改变
Checkbox(                
                value: _isSelected,
                onChanged: (v) {
                  // print(v);
                  setState(() {
                    this._isSelected=v;
                  });
                },
                activeColor: Colors.red,
                checkColor:Colors.blue
                
 )
CheckboxListTile(            
            value: _isSelected,
            title: Text("nodejs视频教程"),
            subtitle: Text("egg.js视频教程"),
            onChanged: (v){
                setState(() {
                    this._isSelected=v;
                });
            },
            activeColor: Colors.red,
            secondary: Image.network("https://www.itying.com/images/flutter/1.png"),           
            selected:_isSelected 
)

三、Radio、RadioListTile单选按钮组件

Radio 常用属性:

属性 描述
value 单选的值
onChanged 改变时触发
activeColor 选中的颜色、背景颜色
groupValue 选择组的值

RadioListTile 常用属性:

属性 描述
value true或者false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
title 标题
subtitle 二级标题
secondary 配置图标或者图片
groupValue 选择组的值
int _groupValue=1;
Radio(                
                value: 0,
                onChanged: (v) {                  
                  setState(() {
                    this._groupValue=v;
                  });
                },
                activeColor: Colors.red,
                groupValue:_groupValue ,
),
Radio(                
                value: 1,
                onChanged: (v) {
                 setState(() {
                    this._groupValue=v;
                  });
                },
                activeColor: Colors.red,
                groupValue:_groupValue ,
)
int _groupValue=1;

_handelChange(v){
   setState(() {
     _groupValue=v;
   });
}

RadioListTile(
             value: 1,
             title: Text("nodejs视频教程"),
             subtitle: Text("egg.js视频教程"),
             secondary: Image.network("https://www.itying.com/images/flutter/1.png"),           
             
             groupValue:_groupValue ,
            onChanged: _handelChange,
       
         ),
Divider(),
RadioListTile(
             value: 0,
             title: Container(
               height: 60,
               child: Text('这是文本'),
               color: Colors.red,
             ),
             // subtitle: Text("egg.js视频教程"),
             secondary: Image.network("https://www.itying.com/images/flutter/1.png"),           
             
             groupValue:_groupValue ,
             onChanged: _handelChange,
       
)

四、开关Switch

属性 描述
value 单选的值
onChanged 改变时触发
activeColor 选中的颜色、背景颜色
Switch(
              value: this.flag,
              onChanged: (v) {
                setState(() {
                  print(v);
                  this.flag = v;
                });
              },
            )

Flutter中的表单组件完整demo

import 'package:flutter/material.dart';

class FormDemoPage extends StatefulWidget {
  FormDemoPage({Key? key}) : super(key: key);

  _FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {

  late String username;
  int sex=1;
  String info='';

  List hobby=[
    {
      "checked":true,
      "title":"吃饭"
    },
     {
      "checked":false,
      "title":"睡觉"
    },
     {
      "checked":true,
      "title":"写代码"
    }
  ];

  List<Widget> _getHobby(){

    List<Widget> tempList=[];

    for(var i=0;i<this.hobby.length;i++){

        tempList.add(
          Row(
            children: <Widget>[
              Text(this.hobby[i]["title"]+":"),
              Checkbox(
                value: this.hobby[i]["checked"],
                onChanged: (value){
                  setState(() {
                    this.hobby[i]["checked"]=value; 
                  });
                }
              )
            ],
          )
        );

    }
    return tempList;

  }

  void _sexChanged(value){
    setState(() {
      this.sex=value; 
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("学员信息登记系统"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: ListView(
          children: <Widget>[

             TextField(
               decoration: InputDecoration(
                 hintText: "输入用户信息"
               ),
               onChanged: (value){
                 setState(() {
                    this.username=value;
                 });
               },
             ),
              SizedBox(height:10),
             Row(
               children: <Widget>[
                 Text("男"),
                 Radio(
                   value: 1,
                   onChanged: this._sexChanged,
                   groupValue: this.sex
                 ),
                 SizedBox(width: 20),
                 Text("女"),
                 Radio(
                   value: 2,
                   onChanged:this._sexChanged,
                   groupValue: this.sex
                 )
               ],
             ),

            //爱好
            SizedBox(height:40),
            Column(
              children: this._getHobby(),
            ),

            TextField(
              maxLines: 4,
               decoration: InputDecoration(
                 hintText: "描述信息",
                 border: OutlineInputBorder()
               ),
               onChanged: (value){
                setState(() {
                  this.info=value;
                });
               },
             ),


           SizedBox(height:40),
             Container(
              width: double.infinity,
              height: 40,
              child: ElevatedButton(
                child: Text("提交信息"),
                onPressed: (){
                  print(this.sex);
                  print(this.username);
                  print(this.hobby);
                },               
              ),
            )
          ],
        ),
      ),
    );
  }
}
回到顶部