滚动条未显示flutter web

Moj*_*our 11 dart flutter

flutter web 中未显示滚动条。我的第二次尝试是:

Widget getSecondStep() {
        return  DraggableScrollbar.arrows(
          controller: ScrollController(),
          child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[BlaBlaBla(), BlaBla()],
                ),
              ],
            ),
        );
      }
Run Code Online (Sandbox Code Playgroud)

我的第一次尝试是:

Widget getSecondStep() {
        return  Scrollbar(
          controller: ScrollController(),
          child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[BlaBlaBla(), BlaBla()],
                ),
              ],
            ),
        );
      }
Run Code Online (Sandbox Code Playgroud)

我正在尝试更改主题颜色,但没有用。

最后, flutter doctor -v

 [?] Flutter (Channel beta, v1.14.6, on Microsoft Windows [Version
 10.0.18362.657], locale en-US)
     • Flutter version 1.14.6 at C:\flutter_windows_v1.9.1+hotfix.2-stable\flutter
     • Framework revision fabeb2a16f (4 weeks ago), 2020-01-28 07:56:51 -0800
     • Engine revision c4229bfbba
     • Dart version 2.8.0 (build 2.8.0-dev.5.0 fc3af737c7)


 [?] Android toolchain - develop for Android devices (Android SDK
 version 29.0.2)
     • Android SDK at C:\Users\moshi\AppData\Local\Android\sdk
     • Android NDK location not configured (optional; useful for native profiling support)
     • Platform android-29, build-tools 29.0.2
     • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
     • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
     • All Android licenses accepted.

 [?] Chrome - develop for the web
     • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

 [?] Android Studio (version 3.5)
     • Android Studio at C:\Program Files\Android\Android Studio
     • Flutter plugin version 40.0.2
     • Dart plugin version 191.8423
     • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

 [!] VS Code (version 1.42.1)
     • VS Code at C:\Users\moshi\AppData\Local\Programs\Microsoft VS Code
     X Flutter extension not installed; install from
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

 [?] Connected device (2 available)
     • Chrome     • chrome     • web-javascript • Google Chrome 79.0.3945.130
     • Web Server • web-server • web-javascript • Flutter Tools

 ! Doctor found issues in 1 category.
Run Code Online (Sandbox Code Playgroud)

Ada*_*aka 6

编辑:2021 年 5 月更新:自 Flutter 2.2 起,滚动条默认应可见


旧答案:

包装一个ListViewScrollbar并使用相同的滚动控制器是这样的:

          Scrollbar(
            isAlwaysShown: true,
            controller: _scrollController,
            child: ListView.builder(
                controller: _scrollController,
                itemCount: 100,
                itemBuilder: (context, index) {
                  return Card(
                      child: ListTile(
                    title: Text("Item: ${index + 1}"),
                  ));
                }),
          ),
Run Code Online (Sandbox Code Playgroud)


Jaf*_*hup 4

这是“预期”的功能。请记住,Web 仍处于测试阶段,目前大多数 Flutter Web 应用程序的外观和行为都类似于 Android Material/iOS 应用程序,显然没有滚动条。同样的道理,你可以用鼠标点击并拖动,页面就会上下移动。

当前有一个关于此主题的 GitHub 问题(您可以在此链接中找到)。请记住,这是一个功能请求。

编辑:截至 4 月 2 日,flutter 现在内置了可配置的滚动条支持!