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)
编辑: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}"),
));
}),
),
Run Code Online (Sandbox Code Playgroud)
这是“预期”的功能。请记住,Web 仍处于测试阶段,目前大多数 Flutter Web 应用程序的外观和行为都类似于 Android Material/iOS 应用程序,显然没有滚动条。同样的道理,你可以用鼠标点击并拖动,页面就会上下移动。
当前有一个关于此主题的 GitHub 问题(您可以在此链接中找到)。请记住,这是一个功能请求。
编辑:截至 4 月 2 日,flutter 现在内置了可配置的滚动条支持!
| 归档时间: |
|
| 查看次数: |
4443 次 |
| 最近记录: |