Flutter 如何使用箭头键滚动Flatter web应用程序

我刚刚构建并部署了一个颤振web应用程序。我遇到的问题是，当我按下箭头键时，它不会滚动，也没有滚动条。（只能滚动两个数字手势）

我正在使用SingleChildScrollView（），并将列作为其子级

有没有办法实现这些目标？

---

还是其中一个？

您可以将

滚动条

包装到

SingleChildScrollView

以显示滚动条，如下所示：

Scrollbar(
      child: SingleChildScrollView(
            child: Container(),
));

---

我找到了一个解决办法

希望这能帮助有同样问题的人

使用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:...

    }
  }

  

class\u MyHomePageState扩展状态{
最终ScrollController_controller=ScrollController（）；
最终焦点节点_FocusNode=FocusNode（）
@凌驾
无效处置（）{
_focusNode.dispose（）；
super.dispose（）；
}
void _handleKeyEvent（RawKeyEvent事件）{
var offset=\u controller.offset；//获取当前位置
if（event.logicalKey.debugName==“向下箭头”）{
设置状态（）{
if（kReleaseMode）{
//此块仅在应用程序以发布模式编译时运行。
_控制器。动画（偏移+50，
持续时间：持续时间（毫秒：200），曲线：Curves.ease）；
}否则{
//这将仅在调试模式下打印有用的信息。
//打印（_controller.position）；以获取信息。。
_控制器。动画（偏移+50，
持续时间：持续时间（毫秒：200），曲线：Curves.ease）；
}
});
}else if（event.logicalKey.debugName==“向上箭头”）{
设置状态（）{
if（kReleaseMode）{
_控制器。动画（偏移-50，
持续时间：持续时间（毫秒：200），曲线：Curves.ease）；
}否则{
_控制器。动画（偏移-50，
持续时间：持续时间（毫秒：200），曲线：Curves.ease）；
}
});
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：RawKeyboardListener(
自动对焦：对，
focusNode:_focusNode，
onKey:_handleKeyEvent，
子：SingleChildScrollView(
控制器：_控制器，
孩子：。。。
}
}
来自Karan的代码可以工作，但是当应用程序处于调试模式时，我们可以使用
event.logicalKey.debugName==“Arrow Up”
，而不是使用
event.logicalKey==LogicalKeyboardKey.arrowUp
，它可以在调试和发布模式下工作

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(),
                ),
            ),
        );
    }
}

class\u MyKeyboardScrollingPageState扩展状态{
最终ScrollController_controller=ScrollController（）；
最终焦点节点_FocusNode=FocusNode（）；
void _handleKeyEvent（RawKeyEvent事件）{
var offset=_controller.offset；
if（event.logicalKey==LogicalKeyboardKey.arrowUp）{
设置状态（）{
if（kReleaseMode）{
_controller.animateTo（偏移量-200，持续时间：持续时间（毫秒：30），曲线：Curves.ease）；
}否则{
_controller.animateTo（偏移量-200，持续时间：持续时间（毫秒：30），曲线：Curves.ease）；
}
});
}
else if（event.logicalKey==LogicalKeyboardKey.arrowDown）{
设置状态（）{
if（kReleaseMode）{
_controller.animateTo（偏移+200，持续时间：持续时间（毫秒：30），曲线：Curves.ease）；
}否则{
_controller.animateTo（偏移+200，持续时间：持续时间（毫秒：30），曲线：Curves.ease）；
}
});
}
}
@凌驾
无效处置（）{
_focusNode.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：RawKeyboardListener(
自动对焦=真，
focusNode=\u focusNode，
onKey:_handleKeyEvent，
子：SingleChildScrollView(
控制器：_控制器，
子项：SomeAwesomeWidget（），
),
),
);
}
}
要使上述答案有效，您需要以下导入：

import 'package:flutter/services.dart';
import 'package:flutter/foundation.dart';

是的，我这样做并使用了ScrollController（）。但我不能单击它并拖动以滚动。