滚动条不显示flutter web

Posted 2023-03-07

【中文标题】滚动条不显示flutter web

【英文标题】：Scrollbar not displayed flutter web

【发布时间】：2020-02-26 18:12:27

【问题描述】：

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

我的第一次尝试是：

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.

【问题讨论】：

你能发布你的“颤振医生-v”吗？

我也遇到了同样的问题，你找到解决办法了吗？

不，我没有找到

【参考方案1】：

编辑：2021 年 5 月更新： 从 Flutter 2.2 开始，滚动条应该默认可见

---

旧答案：

用Scrollbar 包裹ListView 并使用相同的滚动控制器，如下所示：

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

【讨论】：

我必须将滚动控制器连接到两者，这是我的问题。谢谢！

【参考方案2】：

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

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

编辑：从 4 月 2 日起，flutter 中内置了可配置的滚动条支持！

【参考方案3】：

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

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

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

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

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

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

【参考方案4】：

2021 年 3 月更新：在 Flutter 2.0 中，Flutter Web 现在可以在 Stable 频道中使用，您可以使用

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

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

【讨论】：

你能添加你的信息来源吗？文档的链接或其他东西的链接？

“只要确保滚动条和列表的控制器相同”是什么意思？

传递给正在滚动的列表和滚动条的“控制器”变量必须是同一个对象。

如果我不滚动列表怎么办？如果是列呢？

【参考方案5】：

目前 Flutter Web 工作类似于 android/iOS 应用程序。它不支持通过滚动条滚动。您必须使用定制的，如果您想为您的 Web 应用程序使用一个，那么您绝对应该在 pub.dev 中查找 flutter_web_scrollbar 包。