浮动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 xml文件的序列化实现代码

    Android xml文件的序列化实现代码

    Android提供了XmlSerializer来实现XML文件的序列化。相比传统方式,更高效安全,需要的朋友可以参考下
    2014-02-02
  • Android 实现卡片堆叠钱包管理动画效果

    Android 实现卡片堆叠钱包管理动画效果

    这篇文章主要介绍了Android 实现卡片堆叠钱包管理动画效果,实现思路是在动画回调中requestLayout 实现动画效果,用Bounds 对象记录每一个CardView 对象的初始位置,当前位置,运动目标位置,需要的朋友可以参考下
    2022-07-07
  • Android 中图片和按钮按下状态变化实例代码解析

    Android 中图片和按钮按下状态变化实例代码解析

    这篇文章通过实例代码给大家总结了android 中图片和按钮按下状态变化问题,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-06-06
  • Android 常见的图片加载框架详细介绍

    Android 常见的图片加载框架详细介绍

    这篇文章主要介绍了Android 常见的图片加载框架详细介绍的相关资料,需要的朋友可以参考下
    2016-12-12
  • 深入学习Android ANR 的原理分析及解决办法

    深入学习Android ANR 的原理分析及解决办法

    Android系统中,AMS和WMS会检测App的响应时间,如果App在特定时间无法相应屏幕触摸或键盘输入时间,或者特定事件没有处理完毕,就会出现ANR。本文将带领大学深入学习一下ANR的原理及解决办法,感兴趣的同学可以学习一下
    2021-11-11
  • flutter 微信聊天输入框功能实现

    flutter 微信聊天输入框功能实现

    这篇文章主要介绍了flutter 微信聊天输入框功能实现,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • android studio 项目 :UI设计高精度实现简单计算器

    android studio 项目 :UI设计高精度实现简单计算器

    这篇文章主要介绍了android studio 项目 :UI设计高精度实现简单计算器,自主完成一个简单APP的设计工作,综合应用已经学到的Android UI设计技巧,下面来看看实验实现过程
    2021-12-12
  • Android Studio中使用lambda表达式的方法

    Android Studio中使用lambda表达式的方法

    这篇文章主要介绍了Android Studio中使用lambda表达式的方法,需要的朋友可以参考下
    2017-06-06
  • Android实例代码理解设计模式SOLID六大原则

    Android实例代码理解设计模式SOLID六大原则

    程序设计领域, SOLID (单一功能、开闭原则、里氏替换、接口隔离以及依赖反转)是由罗伯特·C·马丁在21世纪早期 引入的记忆术首字母缩略字,指代了面向对象编程和面向对象设计的基本原则
    2021-10-10
  • Android RecyclerChart其它图表绘制示例详解

    Android RecyclerChart其它图表绘制示例详解

    这篇文章主要为大家介绍了Android RecyclerChart其它图表绘制示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论