Question

滚动条未显示在颤动的网络中。我的第二次尝试是：

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

我的第一次尝试是：

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

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

最后，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.

Answer 1

编辑：2021 年 5 月更新：自 Flutter 2.2 起，滚动条默认可见

旧答案：

用 ListView 包裹一个 Scrollbar 并像这样使用相同的滚动控制器：

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

Answer 2

这是“预期”功能。请记住，Web仍处于测试阶段，当前大多数Flutter Web应用程序的外观和行为类似于Android Material / iOS应用程序，后者显然没有滚动条。出于相同的原因，您可以使用鼠标单击并拖动，页面将上下移动。

当前有一个关于此主题(which you can find at this link)的GitHub问题。请记住，这是一项功能请求。

Answer 3

2021 年 3 月更新：借助 Flutter 2.0，Flutter Web 现已在稳定频道中可用，您可以使用

Scrollbar(controller: _scrollController, isAlwaysShown: true, child: ...

显示滚动条并与之交互:) 只需确保滚动条和列表的控制器是相同的。

Answer 4

从 flutter 2.2 开始，Web 和桌面上大多数可滚动小部件的默认行为是在滚动时显示滚动条，并在滚动结束时快速消失滚动条。要在滚动结束后保留滚动条，请将可滚动小部件包装在一个主题中，如下所示：

Theme(
    data: Theme.of(context).copyWith(scrollbarTheme: const ScrollbarThemeData(isAlwaysShown: true)),
    child: SingleChildScrollView(
       controller: scrollController,

如果您使用多个可滚动小部件，请注意添加的 scrollController 以避免 PrimaryScrollController 的位置冲突。

最后要注意的是，如果您希望滚动条在第一次滚动之前就可见，则必须以某种方式对其进行修改。我的解决方案是在框架构建后以编程方式滚动：

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
  scrollController.animateTo(3, duration: const Duration(milliseconds: 200), curve: Curves.ease);
});

希望有一天能派上用场...

Answer 5

当前抖动的网络工作类似于android / iOS应用程序。它不支持通过滚动条滚动。您必须使用自定义的，如果要在Web应用程序中使用一个，则绝对应该在flutter_web_scrollbar中寻找pub.dev软件包。

滚动条未显示抖动网页

5 个答案: