浮动AppBar中的textField焦点回滚问题解决
更新时间：2022年08月16日 15:51:45 作者：shirnewei
这篇文章主要为大家介绍了浮动AppBar中的textField焦点回滚问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
完整问题描述
SliverAppBar的floating=true,pinned=false模式中嵌套的TextField，会在获取焦点时触发CustomScrollView滚动到顶部。
问题表现
CustomScrollView和SliverAppBar的介绍和演示，参见官方文档。
在floating=true和pinned=false 这两个组合参数的模式下，SliverAppBar表现为：列表向上滑动时随列表向上滑动直至消失。
列表在任何位置向下滑动时，会立即从上方滑入直至全部展现。
如果该组件内嵌套了TextField，在列表上滑一段距离，再下滑至SliverAppBar及其内嵌套的TextField出现时(此时列表尚未滑动到顶端)，点击TextField使其获取焦点以输入文字，此时列表会立即滚动至顶。
如图：
初步探索
开始调试问题，尝试了各种参数组合，只要pinned为true就没有这个问题，因为SliverAppBar总会展现在最顶端。然后想到了在获取焦点的同时，将CustomScrollView的physics设置为 NeverScrollableScrollPhysics(意为禁止滚动)，此时并不影响CustomScrollView的滚动位置，然后在输入完成或失去焦点时，再取消禁止滚动的状态，即可避免获取焦点时列表滚动至顶端的问题。解决代码如下：
class CustomScrollTextFieldPage extends StatefulWidget {
const CustomScrollTextFieldPage({Key? key}) : super(key: key);
@override
State<CustomScrollTextFieldPage> createState() =>
_CustomScrollTextFieldPageState();
}
class _CustomScrollTextFieldPageState extends State<CustomScrollTextFieldPage> {
final textController = TextEditingController();
final editableTextController = TextEditingController();
bool focused = false;
final focusNode = FocusNode();
final buttonFocus = FocusNode();
final textFocus = FocusNode();
@override
void initState() {
super.initState();
focusNode.addListener(_onFocus);
}
@override
void dispose() {
focusNode.removeListener(_onFocus);
super.dispose();
}
_onFocus() {
setState(() {
focused = focusNode.hasFocus;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
behavior: HitTestBehavior.translucent,
onTapDown: () {
FocusManager.instance.rootScope.requestFocus(FocusNode());
},
child: CustomScrollView(
physics: focused ? const NeverScrollableScrollPhysics() : null,
slivers: <Widget>[
SliverAppBar(
floating: true,
pinned: false,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
expandedTitleScale: 1,
title: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: TextField(
focusNode: focusNode,
controller: textController,
onEditingComplete: () {
FocusManager.instance.rootScope.requestFocus(FocusNode());
},
style: const TextStyle(color: Colors.white),
decoration: const InputDecoration(
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: IconButton(
visualDensity:
VisualDensity(horizontal: 0, vertical: -4),
padding: EdgeInsets.zero,
onPressed: () {
print('btn clicked');
buttonFocus.requestFocus();
},
focusNode: buttonFocus,
icon: Icon(Icons.heart_broken),
),
)
],
),
),
),
SliverGrid(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
),
),
);
}
}
这个解决方法有点不完美的表现，就是输入完成时不点击页面，而是直接点击收起键盘，这时不会触发onTapDown也不会触发 onEditingComplete ，就需要在屏幕再点击或者滑动时才能重置列表的可滚动状态。
更好的解决办法
经过进一步测试，发现在输入框内的EditableText中对focus进行了监听，在获取焦点时递归调用了RenderObject的showOnScreen方法，会一直向上追溯Render树，最终调用到RenderSliverList中，触发了滚动事件。
是不是可以在TextField外包裹一个自定义了RenderBox的组件，把这个showOnScreen调用给切断呢？于是翻了下官方的几个组件写法，照猫画虎写了个自定义的组件
class IgnoreShowOnScreenWidget extends SingleChildRenderObjectWidget {
const IgnoreShowOnScreenWidget({
Key? key,
Widget? child,
this.ignoreShowOnScreen = true,
}) : super(key: key, child: child);
final bool ignoreShowOnScreen;
@override
RenderObject createRenderObject(BuildContext context) {
return IgnoreShowOnScreenRenderObject(
ignoreShowOnScreen: ignoreShowOnScreen,
);
}
}
class IgnoreShowOnScreenRenderObject extends RenderProxyBox {
IgnoreShowOnScreenRenderObject({
RenderBox? child,
this.ignoreShowOnScreen = true,
});
final bool ignoreShowOnScreen;
@override
void showOnScreen({
RenderObject? descendant,
Rect? rect,
Duration duration = Duration.zero,
Curve curve = Curves.ease,
}) {
if (!ignoreShowOnScreen) {
return super.showOnScreen(
descendant: descendant,
rect: rect,
duration: duration,
curve: curve,
);
}
}
}
使用方法
class CustomScrollTextFieldPage extends StatefulWidget {
const CustomScrollTextFieldPage({Key? key}) : super(key: key);
@override
State<CustomScrollTextFieldPage> createState() =>
_CustomScrollTextFieldPageState();
}
class _CustomScrollTextFieldPageState extends State<CustomScrollTextFieldPage> {
final textController = TextEditingController();
final focusNode = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
FocusManager.instance.rootScope.requestFocus(FocusNode());
},
child: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating: true,
pinned: false,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
expandedTitleScale: 1,
title: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: IgnoreShowOnScreenWidget(
child: TextField(
focusNode: focusNode ,
controller: textController ,
style: const TextStyle(color: Colors.white),
decoration: const InputDecoration(
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: IconButton(
visualDensity:
VisualDensity(horizontal: 0, vertical: -4),
padding: EdgeInsets.zero,
onPressed: () {
print('btn clicked');
},
icon: Icon(Icons.heart_broken),
),
)
],
),
),
),
SliverGrid(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
),
),
);
}
}
初步尝试，确实可以更方便地解决问题。
效果如图：
目前还未发现有什么副作用，如果哪位大神有更好的解决办法，
以上就是浮动AppBar中的textField焦点回滚问题解决的详细内容，更多关于AppBar浮动textField焦点回滚的资料请关注脚本之家其它相关文章！
相关文章
Android提供了XmlSerializer来实现XML文件的序列化。相比传统方式，更高效安全,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了Android 实现卡片堆叠钱包管理动画效果,实现思路是在动画回调中requestLayout 实现动画效果，用Bounds 对象记录每一个CardView 对象的初始位置，当前位置，运动目标位置，需要的朋友可以参考下2022-07-07
这篇文章通过实例代码给大家总结了android 中图片和按钮按下状态变化问题，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小编一起学习吧2018-06-06
这篇文章主要介绍了Android 常见的图片加载框架详细介绍的相关资料,需要的朋友可以参考下2016-12-12
Android系统中，AMS和WMS会检测App的响应时间，如果App在特定时间无法相应屏幕触摸或键盘输入时间，或者特定事件没有处理完毕，就会出现ANR。本文将带领大学深入学习一下ANR的原理及解决办法，感兴趣的同学可以学习一下2021-11-11
这篇文章主要介绍了flutter 微信聊天输入框功能实现,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
android studio 项目 ：UI设计高精度实现简单计算器
这篇文章主要介绍了android studio 项目 ：UI设计高精度实现简单计算器,自主完成一个简单APP的设计工作，综合应用已经学到的Android UI设计技巧,下面来看看实验实现过程2021-12-12
这篇文章主要介绍了Android Studio中使用lambda表达式的方法,需要的朋友可以参考下2017-06-06
程序设计领域， SOLID (单一功能、开闭原则、里氏替换、接口隔离以及依赖反转)是由罗伯特·C·马丁在21世纪早期 引入的记忆术首字母缩略字，指代了面向对象编程和面向对象设计的基本原则2021-10-10
Android RecyclerChart其它图表绘制示例详解
这篇文章主要为大家介绍了Android RecyclerChart其它图表绘制示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论