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)), ), ), ], ), )); } }