Flutter控制某個TextField獲取焦點及失去焦點

在項目中有時需要點擊某個地方的時候讓一個文本框獲取焦點以彈起鍵盤~~比如前端經常使用的input.focus()，但是在flutter中沒有.focus()這個方法~~不過我們可以通過FocusScope.of(context).requestFocus()來實現這一操作

先看一下實現場景，點擊某一條留言然后讓文本框獲取焦點彈出鍵盤：

 

要使用FocusScope.of(context).requestFocus()需要先定義一個FocusNode

FocusNode _commentFocus = FocusNode();

TextField(
  focusNode: _commentFocus,
),

　　

獲取焦點

當點擊時用FocusScope.of(context).requestFocus()獲取焦點

FocusScope.of(context).requestFocus(_commentFocus);     // 獲取焦點

　　

失去焦點

當發送留言之后可以通過unfocus()讓其失去焦點

_commentFocus.unfocus();    // 失去焦點

　　

最后附上完整代碼

import 'package:flutter/material.dart';

class CommentTest extends StatefulWidget {
  @override
  _CommentTestState createState() => _CommentTestState();
}

class _CommentTestState extends State<CommentTest> {

  TextEditingController _textEditingController = TextEditingController();
  String _currentTipsText = "有愛評論，說點兒好聽的~";
  FocusNode _commentFocus = FocusNode();
  List<Map> _commentList = [
    {
      'name': '塗山雛雛',
      'headerImg': 'http://i2.hdslb.com/bfs/face/cab3e9ec886ff98bc7ac6cb2dca194051895dfba.jpg@52w_52h.webp',
      'content': '你以為我是紅細胞，其實我是兵庫北噠(｀・ω・´)~'
    },
    {
      'name': '漆黑的魂焰魔法使',
      'headerImg': 'http://i0.hdslb.com/bfs/face/6edd973203eb1ec2b576a3bc61ee555e3757b674.jpg@52w_52h.webp',
      'content': '你說我的頭發怎么了啊，啊!'
    },
    {
      'name': '汐華初流艿',
      'headerImg': 'http://i0.hdslb.com/bfs/face/ecf4c932d4f09ffdcd769b423764210488d03209.jpg@52w_52h.webp',
      'content': '你們因為你們身體里面真的有萌妹子嗎，其實全都是dio噠'
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('點擊留言輸入框獲取焦點',style: TextStyle(color: Colors.white,fontSize: 20),),
      ),
      body: Stack(
        children: <Widget>[
          ListView.builder(
            itemCount: _commentList.length,
            itemBuilder: (context,index){
              return ListTile(
                leading: ClipRRect(borderRadius: BorderRadius.circular(20),child: Image.network(_commentList[index]['headerImg'],width: 40,height: 40,),),
                title: Text(_commentList[index]['name']),
                subtitle: Text(_commentList[index]['content']),
                onTap: (){
                  _switchReply(_commentList[index]['name']);
                },
              );
            },
          ),
          Positioned(
            left: 0,
            bottom: 0,
            child: Container(
              width: MediaQuery.of(context).size.width,
              color: Color.fromRGBO(222, 222, 222, 1),
              height: 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: TextField(
                      controller: _textEditingController,
                      focusNode: _commentFocus,
                      decoration: InputDecoration(
                        hintText: _currentTipsText,
                        contentPadding: EdgeInsets.only(left: 10,top: 17,bottom: 17),
                      ),
                    ),
                  ),
                  InkWell(
                    child: Container(
                      width: 50,
                      height: 50,
                      alignment: Alignment.center,
                      child: Icon(Icons.near_me,size: 25.5,color: Color.fromRGBO(50, 50, 50, 1)),
                    ),
                    onTap: (){
                      _sendMessage();
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      )
    );
  }

  // 發送回復評論
  void _sendMessage() {
    _commentList.add({
      'name': '愛吃漢堡包的天殘',
      'headerImg': 'http://i1.hdslb.com/bfs/face/1cb09a8cfec19bd06fbbeba5b978c1ee52a62d3f.jpg@52w_52h.webp',
      'content': _textEditingController.text
    });
    _currentTipsText = "有愛評論，說點兒好聽的~";
    _textEditingController.text = '';
    _commentFocus.unfocus();    // 失去焦點
  }

  // 獲取焦點拉起鍵盤
  void _switchReply(nickname) {
    setState(() {
      _currentTipsText = '回復 '+nickname+':';
    });
    FocusScope.of(context).requestFocus(_commentFocus);     // 獲取焦點
  }

}