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

Question

我刚刚构建并部署了一个 Flutter Web 应用程序。我遇到的问题是当我按箭头键时它不滚动，也没有滚动条。（只有 2 图形手势滚动是可能的）

我将 SingleChildScrollView() 与列作为其子项一起使用。

有没有办法实现它们？

还是只是其中之一？

Answer 1

来自 Karan 的代码可以工作，但是当应用程序处于Debug Mode 时event.logicalKey.debugName == "Arrow Up"，我们可以使用event.logicalKey == LogicalKeyboardKey.arrowUpwhich 在调试和发布模式下都可以工作，而不是使用。

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