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

【问题标题】：How to scroll flutter web app using arrow keys如何使用箭头键滚动 Flutter Web 应用程序
【发布时间】：2020-11-29 10:59:11
【问题描述】：

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

我正在使用 SingleChildScrollView() 并将列作为其子列。

有没有办法实现它们？

或者只是其中之一？

【问题讨论】：

标签： flutter scroll flutter-web flutter-test

【解决方案1】：

要使上述答案起作用，您需要以下导入：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我找到了一种解决方案...

希望这可以帮助遇到同样问题的人...

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

    }
  }

【讨论】：

【解决方案4】：

您可以将ScrollBar 换成SingleChildScrollView 以显示滚动条，如下所示：

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

【讨论】：

是的，我这样做并使用了 ScrollController()。但我不能点击它并拖动滚动。