美文网首页
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