选择框和输入框
2020-01-15 本文已影响0人
spades_K
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '开关、输入框、进度器',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _switchSeleted = true; // 维护单选开关状态
bool _checkboxSelected = true; // 维护复选框状态
FocusNode _fnode1 = FocusNode();
FocusNode _fnode2 = FocusNode();
FocusNode _tempfn;
TextEditingController _textChangeC = TextEditingController(); //控制器(监听器)
@override
// 重写
void initState(){
super.initState();
_textChangeC.addListener((){
print(_textChangeC.text);
});
_fnode2.addListener((){
print(_fnode1.hasFocus);
});
_fnode1.addListener((){
print(_fnode1.hasFocus);
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'********************开关********************',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.red,
fontSize: 20,
),
),
Switch(
value: _switchSeleted,
onChanged: (newValue){
// 重新构建界面
setState(() {
_switchSeleted = newValue;
});
},
),
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red, // 选中颜色
onChanged: (newValue){
setState(() {
_checkboxSelected = newValue;
});
},
),
Text(
'********************输入框*****************',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.red,
fontSize: 20,
),
),
TextField(
autofocus: true,
onChanged: (v){
print(v);
},
focusNode: _fnode1,
decoration: InputDecoration(
labelText: '用户名',
hintText: '用户名或邮箱',
prefixIcon: Icon(Icons.people),
),
),
TextField(
autofocus: false,
controller: _textChangeC,
focusNode: _fnode2,
decoration: InputDecoration(
labelText: '密码',
hintText: '您的密码',
prefixIcon: Icon(Icons.lock),
),
obscureText: true, // 加密显示
),
RaisedButton(
child: Text('移动焦点'),
onPressed: (){
if(_tempfn == null){
_tempfn = FocusScope.of(context);
return;
}
_tempfn.requestFocus(_fnode1);
},
),
RaisedButton(
child: Text('隐藏焦点'),
onPressed: (){
_fnode1.unfocus();
_fnode2.unfocus();
},
),
],
),
),
);
}
}
