我刚刚建立并部署了一个flutter网页应用程序。我遇到的问题是,当我按下箭头键时,它不滚动,也没有滚动条。(只有2个手势滚动是可能的)我正在使用SingleChildScrollView(),并将该列作为其子级。
是否有办法实施这些措施?
"还是其中一个“
gt0wga4j1#
Karan的代码可以正常工作,但当应用处于调试模式时,我们可以使用event.logicalKey == LogicalKeyboardKey.arrowUp,而不是使用event.logicalKey.debugName == "Arrow Up",event.logicalKey == LogicalKeyboardKey.arrowUp在调试和发布模式下都能正常工作。
event.logicalKey == LogicalKeyboardKey.arrowUp
event.logicalKey.debugName == "Arrow Up"
class _MyKeyboardScrollingPageState extends State<MyKeyboardScrollingPage> { final ScrollController _controller = ScrollController(); final FocusNode _focusNode = FocusNode(); void _handleKeyEvent(RawKeyEvent event) { var offset = _controller.offset; if (event.logicalKey == LogicalKeyboardKey.arrowUp) { setState(() { if (kReleaseMode) { _controller.animateTo(offset - 200, duration: Duration(milliseconds: 30), curve: Curves.ease); } else { _controller.animateTo(offset - 200, duration: Duration(milliseconds: 30), curve: Curves.ease); } }); } else if (event.logicalKey == LogicalKeyboardKey.arrowDown) { setState(() { if (kReleaseMode) { _controller.animateTo(offset + 200, duration: Duration(milliseconds: 30), curve: Curves.ease); } else { _controller.animateTo(offset + 200, duration: Duration(milliseconds: 30), curve: Curves.ease); } }); } } @override void dispose() { _focusNode.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: RawKeyboardListener( autoFocus = true, focusNode = _focusNode, onKey: _handleKeyEvent, child: SingleChildScrollView( controller: _controller, child: SomeAwesomeWidget(), ), ), ); } }
zbdgwd5y2#
我找到了一个解决办法...希望这对有同样问题的人有帮助。使用RawKeyboardListener(),我们可以监听任何键盘敲击。
class _MyHomePageState extends State<MyHomePage> { final ScrollController _controller = ScrollController(); final FocusNode _focusNode = FocusNode() @override void dispose() { _focusNode.dispose(); super.dispose(); } void _handleKeyEvent(RawKeyEvent event) { var offset = _controller.offset; //Getting current position if (event.logicalKey.debugName == "Arrow Down") { setState(() { if (kReleaseMode) { //This block only runs when the application was compiled in release mode. _controller.animateTo(offset + 50, duration: Duration(milliseconds: 200), curve: Curves.ease); } else { // This will only print useful information in debug mode. // print(_controller.position); to get information.. _controller.animateTo(offset + 50, duration: Duration(milliseconds: 200), curve: Curves.ease); } }); } else if (event.logicalKey.debugName == "Arrow Up"){ setState(() { if (kReleaseMode) { _controller.animateTo(offset - 50, duration: Duration(milliseconds: 200), curve: Curves.ease); } else { _controller.animateTo(offset - 50, duration: Duration(milliseconds: 200), curve: Curves.ease); } }); @override Widget build(BuildContext context) { return Scaffold( body: RawKeyboardListener( autofocus: true, focusNode: _focusNode, onKey: _handleKeyEvent, child: SingleChildScrollView( controller: _controller, child:... } }
3z6pesqy3#
您可以将ScrollBar换行到SingleChildScrollView以显示滚动条,如下所示:
ScrollBar
SingleChildScrollView
Scrollbar( child: SingleChildScrollView( child: Container(), ));
vfwfrxfs4#
要使上述答案起作用,您需要以下导入:
import 'package:flutter/services.dart'; import 'package:flutter/foundation.dart';
6bc51xsx5#
在Flutter Web上使用鼠标或键盘箭头键滚动的最简单方法是
ListView( primary: true, scrollDirection: Axis.vertical, children:
无需传递任何ScrollController
5条答案
按热度按时间gt0wga4j1#
Karan的代码可以正常工作,但当应用处于调试模式时,我们可以使用
event.logicalKey == LogicalKeyboardKey.arrowUp
,而不是使用event.logicalKey.debugName == "Arrow Up"
,event.logicalKey == LogicalKeyboardKey.arrowUp
在调试和发布模式下都能正常工作。zbdgwd5y2#
我找到了一个解决办法...
希望这对有同样问题的人有帮助。
使用RawKeyboardListener(),我们可以监听任何键盘敲击。
3z6pesqy3#
您可以将
ScrollBar
换行到SingleChildScrollView
以显示滚动条,如下所示:vfwfrxfs4#
要使上述答案起作用,您需要以下导入:
6bc51xsx5#
在Flutter Web上使用鼠标或键盘箭头键滚动的最简单方法是
无需传递任何ScrollController