美文网首页
选择框和输入框

选择框和输入框

作者: spades_K | 来源:发表于2020-01-15 18:48 被阅读0次
    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();
                  },
                ),
              ],
            ),
          ),
        );
      }
    }
    
    
    效果图

    相关文章

      网友评论

          本文标题:选择框和输入框

          本文链接:https://www.haomeiwen.com/subject/bwtxzctx.html