Flutter 常用表单 CheckBox、Radio、Switch CheckboxListTile、RadioListTile、SwitchListTile、Slide

发布于 5 个月前 作者 phonegap100 317 次浏览 来自 分享

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

一、Flutter TextField文本框组件

TextField表单常见属性: maxLines 设置此参数可以把文本框改为多行文本框 onChanged 文本框改变的时候触发的事件 decoration hintText 类似html中的placeholder border 配置文本框边框 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: "请输入您的内容",               
              ),
              
)

二、Flutter Checkbox、CheckboxListTile多选框组件

Checkbox常见属性:

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

三、Flutter 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 
)

四、Flutter Radio、RadioListTile单选按钮组件

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,
        
)

五、Flutter 开关Switch

value 单选的值 onChanged 改变时触发 activeColor 选中的颜色、背景颜色

回到顶部