Flutter (五) Widget基础 ( 三 )

单选，复选框

Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox，它们都是继承自StatelessWidget，所以它们本身不会保存当前选择状态，所以一般都是在父widget中管理选中状态。当用户点击Switch或Checkbox时，它们会触发onChanged回调，我们可以在此回调中处理选中状态改变逻辑。也是从网上找来的例子

1、Switch(开关)

import 'package:flutter/material.dart';

void main() => runApp(SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar Demo'),
        ),
        body: SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatefulWidget {
  @override
  _SnackBarPageState createState() => _SnackBarPageState();
}

class _SnackBarPageState extends State<SnackBarPage> {
 bool _value=false;

  @override
  Widget build(BuildContext context) { 
    
    return Container(
      child: Center(
    child: Switch(
        value: _value,
        onChanged: (bool value) {
               setState(() {
                _value=value;
           if (_value==true) {
             final snackBar = SnackBar(content: Text('开'),);
              Scaffold.of(context).showSnackBar(snackBar); 
          } else {
            final snackBar = SnackBar(content: Text('关'),);
              Scaffold.of(context).showSnackBar(snackBar); 
          }
              });
            },
      )
    )
    );
   
  }
}

2、Radio

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('RadioListTile Demo'),
        ),
        body: SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatefulWidget {
  @override
  _SnackBarPageState createState() => _SnackBarPageState();
}

class _SnackBarPageState extends State<SnackBarPage> {
 String _groupValue='升压';

  @override
  Widget build(BuildContext context) { 
    
    return Container(
      child: Column(
        children: <Widget>[
          RadioListTile<String>(
            value: '升压',
            title: Text('升压'),
            groupValue: _groupValue,
            onChanged: (value){
              setState(() {
                _groupValue=value;
              });
            },
          ),

            RadioListTile<String>(
            value: '升降压',
            title: Text('升降压'),
            groupValue: _groupValue,
            onChanged: (value){
              setState(() {
                _groupValue=value;
              });
            },
          ),

            RadioListTile<String>(
            value: '降压',
            title: Text('降压'),
            groupValue: _groupValue,
            onChanged: (value){
              setState(() {
                _groupValue=value;
              });
            },
          ),
          RaisedButton(
            onPressed: (){
              final snackBar = SnackBar(content: Text('你选择的是$_groupValue'),);
              Scaffold.of(context).showSnackBar(snackBar);
            },
            child: Text('确定'),
          ),
        ],
      )
    );
   
  }
}

3、Checkbox

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('RadioListTile Demo'),
        ),
        body: SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatefulWidget {
  @override
  _SnackBarPageState createState() => _SnackBarPageState();
}

class _SnackBarPageState extends State<SnackBarPage> {
 bool _value=false;
 bool _value1=false;
 bool _value2=false;
  @override
  Widget build(BuildContext context) { 
    
    return Container(
      child: Column(
        children: <Widget>[

        CheckboxListTile(
          value: _value,
          title: Text('升压'),
          onChanged: (value){
            setState(() {
              _value=value;
            });
          },
        ),

        CheckboxListTile(
          value: _value1,
          title: Text('升降压'),
          onChanged: (value){
            setState(() {
              _value1=value;
            });
          },
        ),

   CheckboxListTile(
          value: _value2,
          title: Text('降压'),
          onChanged: (value){
            setState(() {
              _value2=value;
            });
          },
        ),
        RaisedButton(
            onPressed: (){
              final snackBar = SnackBar(content: Text('升压$_value,升降压$_value1,降压$_value2'),);
              Scaffold.of(context).showSnackBar(snackBar);
            },
            child: Text('确定'),
          ),

        ],
      )
    );
   
  }
}

表单

import 'package:flutter/material.dart';

void main() => runApp(new LoginPage());

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // 全局key用来获取Form表单组件
  GlobalKey<FormState> loginKey = new GlobalKey<FormState>();
  String userName;
  String password;
  void login() {
    // 读取当前的Form状态
    var loginForm = loginKey.currentState;

    //验证
    if (loginForm.validate()) {
      loginForm.save();
      print('username:' + userName + ' password:' + password);
    }
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Form表单',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Form表单'),
          ),
          body: new Column(
            children: <Widget>[
              new Container(
                padding: const EdgeInsets.all(16.0),
                child: new Form(
                    key: loginKey,
                    child: new Column(
                      children: <Widget>[
                        new TextFormField(
                          decoration: new InputDecoration(labelText: '请输入用户名'),
                          onSaved: (value) {
                            userName = value;
                          },
                          onFieldSubmitted: (value) {},
                        ),
                        new TextFormField(
                          decoration: new InputDecoration(labelText: '请输入密码'),
                          obscureText: true,
                          validator: (value) {
                            return value.length < 6 ? "密码长度少于6位" : null;
                          },
                          onSaved: (value) {
                            password = value;
                          },
                        )
                      ],
                    )),
              ),
              new SizedBox(
                width: 340.0,
                height: 42.0,
                child: new RaisedButton(
                  onPressed: login,
                  child: new Text('登入', style: TextStyle(fontSize: 18.0)),
                ),
              ),
            ],
          ),
        ));
  }
}