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

7qhs6swi  于 2022-11-25  发布在  Flutter
关注(0)|答案(5)|浏览(144)

我刚刚建立并部署了一个flutter网页应用程序。我遇到的问题是,当我按下箭头键时,它不滚动,也没有滚动条。(只有2个手势滚动是可能的)
我正在使用SingleChildScrollView(),并将该列作为其子级。

是否有办法实施这些措施?

"还是其中一个“

gt0wga4j

gt0wga4j1#

Karan的代码可以正常工作,但当应用处于调试模式时,我们可以使用event.logicalKey == LogicalKeyboardKey.arrowUp,而不是使用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(),
                ),
            ),
        );
    }
}
zbdgwd5y

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

    }
  }
3z6pesqy

3z6pesqy3#

您可以将ScrollBar换行到SingleChildScrollView以显示滚动条,如下所示:

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

vfwfrxfs4#

要使上述答案起作用,您需要以下导入:

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

6bc51xsx5#

在Flutter Web上使用鼠标或键盘箭头键滚动的最简单方法是

ListView(
                    primary: true,
                    scrollDirection: Axis.vertical,
                    children:

无需传递任何ScrollController

相关问题