flutter焦点,Flutter焦点效果

flutter中关于软键盘弹起导致的问题

原因:在flutter中,键盘弹起时系统会缩小Scaffold的高度并重建

创新互联是一家专注于网站设计制作、成都网站建设与策划设计,玉泉街道网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:玉泉街道等地区。玉泉街道做网站价格咨询:18980820575

1)把Scaffold的resizeToAvoidBottomInset属性设置为false,这样在键盘弹出时将不会resize

2)把写死的高度改为 原高度 - MediaQuery.of(context).viewInsets.bottom ,键盘弹出时布局将重建,而这个 MediaQuery.of(context).viewInsets.bottom 变量在键盘弹出前是0,键盘弹起后的就是键盘的高度

将输入框放进可滚动的Widget中即可,当输入框获取焦点后,系统会自动将它滑动到可视区域

Flutter 之 输入框TextField

Material组件库中提供了输入框组件TextField

TextField用于文本输入,它提供了很多属性,我们先简单介绍一下主要属性的作用,然后通过几个示例来演示一下关键属性的用法。

prefix和prefixText 以及suffix和suffixText 不能同时存在

获取输入内容

通过onChange回调

通过controller监听

_controller .addListener(() {

print(_controller .text);

});

两种方式相比,onChanged是专门用于监听文本变化,而controller的功能却多一些,除了能监听文本变化外,它还可以设置默认值、选择文本

这里我们就用到了focusNode

焦点可以通过FocusNode和FocusScopeNode来控制,默认情况下,焦点由FocusScope来管理,它代表焦点控制范围,可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点、设置默认焦点等。我们可以通过FocusScope.of(context) 来获取Widget树中默认的FocusScopeNode。

Flutter实战

一文解决Flutter中使用TextField遇到的各种疑难杂症

可以使用 SingleChildScrollView 包裹布局

这里还需要了解一个 Scaffold 中的一个属性 resizeToAvoidBottomInset

官方文档给出的解释就是处理键盘遮挡问题,默认是 true,如果不希望顶起需要设置为 false。

在 sdk 低版本的时候是使用 resizeToAvoidBottomPadding 需要将其设置为 false,现在已经弃用。但网上很多文章还没有改正,仍然用的 resizeToAvoidBottomPadding。

分两种情况

一种是使用系统的返回键,比如 android 底部导航自带的返回,

另一种是使用导航栏自定义的返回键

第一种情况需要在页面根布局使用 WillPopScope 在 onWillPop 中拦截返回处理。

原理都是通过判断输入框是否获取了焦点

当底部有固定的组件,比如提交按钮,我们在键盘弹起的时候希望按钮贴着键盘顶部固定,但是中间滚动视图可以自由滚动

可以在 SingleChildScrollView 外部再使用 Stack 包裹,悬浮按钮使用 Positioned 定位,

还要⚠️注意要给滚动组件底部留出距离防遮挡,同时还有动态加上 bottomBar 的高度,因为在 iphoneX 以上的手机,会有个虚拟按键,如果不加上该按键高度,同样会被遮挡

高度获取方法: MediaQuery.of(context).padding.bottom

在 showDialog 布局中使用 Scaffold 包裹,不要忘了将 backgroundColor 设为透明。

如果弹窗过高,还是需要将高度固定,然后使用 SingleChildScrollView ,弹窗中同样也可以在执行关闭的时候拦截,判断键盘是否弹起,如果弹起则要先关闭键盘。

给所有输入框绑定 FoucusNode

在 maxLines=1 的情况下,输入框不支持换行,换行按钮会变成 done

监听 onEditingComplete 方法

根布局使用 GestureDetector 或者 InkWell 包裹,点击的时候收起键盘。

最后要记得销毁


分享名称:flutter焦点,Flutter焦点效果
本文网址:http://scyanting.com/article/dsisdis.html