flutter - WEB {Chrome 和 Edge} 中的 Flutter SilverAppBar 故障
问题描述
因此,我制作了一个使用 SilverAppBar 的带有颤振的简单 Web 应用程序。问题出现在滚动中。当我滚动它时,当光标从 SilverAppBar 上移开时,它会自动移到顶部。我不知道是什么导致了问题。我已经在 chrome 和边缘浏览器上运行了该应用程序,但同样的故障一次又一次地发生。我也尝试过 flutter clean 命令,但得到了相同的结果。
我无法在此处上传视频,但我在 youtube 上的视频 Youtube 视频显示故障
另外,源代码如下:
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
backgroundColor: Colors.yellow,
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
return <Widget>[
SliverAppBar(
expandedHeight: MediaQuery.of(context).size.height,
collapsedHeight: 100,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.all(0),
title: Container(
color: Colors.transparent,
child: Align(
alignment: Alignment.bottomCenter,
child: Align(
alignment: Alignment.center,
child: Text(
"Who Will Help Me?", style: TextStyle(fontSize: 50,),
),
),
),
),
background: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.green,
),
),
),
];
},
body: ListView(
padding: EdgeInsets.all(0),
children: [
Padding(padding: EdgeInsets.all(100), child: Text("demo text"),),
Padding(padding: EdgeInsets.all(100), child: Text("demo text"),),
Padding(padding: EdgeInsets.all(100), child: Text("demo text"),),
Padding(padding: EdgeInsets.all(100), child: Text("demo text"),),
Padding(padding: EdgeInsets.all(100), child: Text("demo text"),),
],
),
),
);
在此处上传颤振医生:
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel dev, 1.20.0-0.0.pre, on Microsoft Windows [Version 10.0.18363.719],
locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
X Android license status unknown.
Try reinstalling or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit https://flutter.dev/docs/get-
started/install/windows#android-setup for detailed
instructions.
[√] Chrome - develop for the web
[√] Android Studio (version 3.6)
[√] VS Code, 64-bit edition (version 1.46.0)
[√] Connected device (3 available)
! Doctor found issues in 1 category.
解决方案
解决了。
SliverAppBar 有自己的小部件,它应该始终与 SliverListViews 和 SliverGridViews 一起使用。 无聊的 Flutter 开发秀,Ep。12
推荐阅读
- visual-studio - 没有自定义 ChromeWindow 的 XAML 设计器预览
- angular - 在角度 6 中单击另一个按钮后,可观察到的为空
- apache-spark - 向火花数据框添加新列
- reactjs - Create-React-App 中的启动画面
- delphi - FreeAndNil 程序是否也释放线程中创建的 TStringList?
- reactjs - 反应将数组传递给子组件
- php - 下拉菜单。完全初学者,超出我的深度,救救我
- css - 卡片中的圆形图像,添加了类但没有变化
- tensorflow - 有没有办法将 Tensorflow 记录文件保存在内存中?
- javascript - AngularJS控制器包装在范围内时不显示数据