Flutter中SelectableText选中滚动异常问题及代码修复需求
解决SelectableText选中文本后滚动页面回退的异常
当SingleChildScrollView嵌套SelectableText时,两者的滚动逻辑会产生冲突,选中文本后滚动页面会触发SelectableText内部的滚动逻辑,导致页面异常回退到靠前位置。以下是两种可行的修改方案:
方案一:移除外层SingleChildScrollView
SelectableText本身支持长文本的内部滚动,直接将它作为body的子组件即可:
class _Page2State extends State<Page2> { @override Widget build(BuildContext context) { return Scaffold( drawer: NavigationMenu(), appBar: AppBar(title: const Text("Page 2")), body: SelectableText(''' Some long text Example row 1\n Example row 2\n Example row 3\n Example row 4\n Example row 5\n Example row 6\n Example row 7\n Example row 8\n Example row 9\n Example row 10\n Example row 11\n ''', style: TextStyle(fontSize: 20) ), ); } }
方案二:禁用SelectableText内部滚动
如果需要保留外层的SingleChildScrollView,给SelectableText设置scrollPhysics: NeverScrollableScrollPhysics(),禁用其内部滚动逻辑,让外层滚动全权处理:
class _Page2State extends State<Page2> { @override Widget build(BuildContext context) { return Scaffold( drawer: NavigationMenu(), appBar: AppBar(title: const Text("Page 2")), body: SingleChildScrollView( child: Column( children: <Widget>[ SelectableText(''' Some long text Example row 1\n Example row 2\n Example row 3\n Example row 4\n Example row 5\n Example row 6\n Example row 7\n Example row 8\n Example row 9\n Example row 10\n Example row 11\n ''', style: TextStyle(fontSize: 20), scrollPhysics: NeverScrollableScrollPhysics(), ), ], ), ), ); } }
两种方案均能实现选中文本后正常滚动页面的效果,不会再出现异常回退问题。
内容的提问来源于stack exchange,提问作者Software
相关产品推荐
相关产品推荐

