在项目中有时需要点击某个地方的时候让一个文本框获取焦点以弹起键盘~~比如前端经常使用的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); // 获取焦点
} }

  

Flutter控制某个TextField获取焦点及失去焦点的更多相关文章

  1. Jquery使用Id获取焦点和失去焦点

    Jquery使用Id获取焦点和失去焦点有2种方法 先用第一种(val()=="空"): <div> <input type="text" id ...

  2. iOS开发小技巧--textField成为密码框,view加载完后textField获取焦点

    文本框安全输入:Secure Text Entry(安全文本输入) view加载完后textField获取焦点的正确做法

  3. Flutter的输入框TextField

    TextFiled组件的API 先来看一下TextFiled的构造方法: const TextField({ Key key, this.controller, this.focusNode, thi ...

  4. Android Edittext 显示光标 获取焦点 监听焦点

    Edittext java 代码控制获取焦点 EditText mEditText = (EditText) findViewById(R.id.et); mEditText.setFocusable ...

  5. input文本框获取焦点和失去焦点判断

    onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onB ...

  6. jquery获取焦点和失去焦点事件代码

    input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调 ...

  7. jquery注册文本框获取焦点清空,失去焦点赋值的简单实例

    在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语.   <html> <head> <meta h ...

  8. jquery注冊文本框获取焦点清空,失去焦点赋值

    在我们开发过程中特别是用户注冊时会有一个效果.就是文本框获取焦点清空提示,假设用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http ...

  9. Flutter文本框TextField

    参数详解TextField同时也使用Text 的部分属性: 属性 作用controller 控制器,如同 Android View iddecoration 输入器装饰keyboardType 输入的 ...

随机推荐

  1. 常用的bug管理工具

    1. QC(Quality Center)是原Mercury Interactive公司(现已被HP收购)生产的企业级基于WEB測试管理工具,须要安装配置IIS和数据库.系统资源消耗比較 大:功能非常 ...

  2. 记录在苹果X手机上运行遇到的代码Dom被阻塞不更新的一个坑

    一.问题产生背景: 开发支付功能,代码逻辑如下:点击支付后,请求后台接口得到流水号以及第三方支付台链接,跳转支付台(在苹果手机则是弹出支付台层):支付完毕后返回支付页面,或中途退出支付台返回支付页面: ...

  3. Linux服务器centos7系统下搭建Jenkins

    Jenkins是什么? Jenkins是开源CI&CD软件领导者, 提供超过1000个插件来支持构建.部署.自动化, 满足任何项目的需要. 所以现在是越来越多的公司都在使用Jenkins做持续 ...

  4. centos根目录扩容,home目录减小容量

    参考: https://blog.csdn.net/evandeng2009/article/details/49814097 主要命令: 15 cd / 16 ll 17 mkdir backup ...

  5. linux修改文件系统注册设备

  6. Django:总结setting中的配置

    一.Django setting配置说明 二.setting配置一览 一.Django setting配置说明 1.基础 DJANGO_SETTING_MODULE环境变量:让settings模块被包 ...

  7. nginx精准反向代理

    1,完全反向代理,将请求10.130.111.110服务器的请求全部转发到10.130.111.111服务器 location / { proxy_pass http://10.130.111.111 ...

  8. ubuntu---解决pip安装tf很慢的问题

    ubuntu---解决pip安装tf很慢的问题 [问题] 执行 u@u160406:~$ sudo pip3 install tensorflow-gpu==1.15.0rc2 下载速度真的很慢 Lo ...

  9. Oracle查询表空间使用情况的一个sql

    select  t1.tablespace_name,curr_b/1024/1024/1024,max_b/1024/1024/1024,curr_b/max_b from(select table ...

  10. K-D树

    一般用来解决各种二维平面的点对统计,也许一般非正解? 没时间慢慢写了,打完这个赛季后补细节 建树板子: #include <cstdio> #include <locale> ...