美文网首页
Flutter-TextField焦点切换

Flutter-TextField焦点切换

作者: noonez | 来源:发表于2019-04-18 16:17 被阅读0次

    焦点切换前需要将前一个焦点用方法"FocusNode .unfocus()"取消,然后再用"FocusScope.of(context).requestFocus(FocusNode)"方法设置成想要的焦点, 不然就看不到焦点变换。

    还有对已是焦点的对象用"FocusScope.of(context).requestFocus(FocusNode)"方法设置会抛出一个错误,所以FocusNode在被设置之前判断一次FocusNode.hasFocus为false才能用"FocusScope.of(context).requestFocus(FocusNode)"方法设置.

    import 'package:flutter/material.dart';
    
    class TextFocusManagerTest extends StatefulWidget{
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return TextFocusManagerState();
      }
    }
    
    class TextFocusManagerState extends State<TextFocusManagerTest>{
      FocusNode text1FocusNode = FocusNode();
      FocusNode text2FocusNode = FocusNode();
      FocusScopeNode _focusScopeNode = FocusScopeNode();
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(title: Text("TextFocusManagerTest"),),
          body: Padding(
              padding: EdgeInsets.all(16),
              child: Column(
                children: <Widget>[
                  TextField(
                    autofocus: true,
                    focusNode: text1FocusNode,
                    decoration: InputDecoration(
                        hintText: "Input1"
                    ),
                  ),
                  TextField(
                    autofocus: true,
                    focusNode: text2FocusNode,
                    decoration: InputDecoration(
                        hintText: "Input2"
                    ),
                  ),
                  Builder(
                    builder: (context) => Column(
                      children: <Widget>[
                        RaisedButton(
                          onPressed: (){
                            if(_focusScopeNode == null) _focusScopeNode = FocusScope.of(context);
    
                            if(text2FocusNode.hasFocus){
                              print("focus to 1");
                              text2FocusNode.unfocus();
                              _focusScopeNode.requestFocus(text1FocusNode);
                            }else if(text1FocusNode.hasFocus){
                              print("focus to 2");
                              text1FocusNode.unfocus();
                              _focusScopeNode.requestFocus(text2FocusNode);
                            }
                          },
                          child: Text("移动焦点"),
                        ),
                        RaisedButton(
                          onPressed: (){
                            if(text2FocusNode.hasFocus){
                              text2FocusNode.unfocus();
                            }else if(text1FocusNode.hasFocus){
                              text1FocusNode.unfocus();
                            }
                          },
                          child: Text("隐藏键盘"),
                        )
                      ],
                    ),
                  )
                ],
              )
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter-TextField焦点切换

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