WEB {Chrome 和 Edge} 中的 Flutter SliverAppBar 故障

Question

所以，我制作了一个简单的 Web 应用程序，它带有一个使用 SilverAppBar 的 flutter。问题出现在滚动中。当我滚动它时，当光标离开 SilverAppBar 时，它会自动移到顶部。我不知道是什么导致了这个问题。我有运行 chrome 上的应用程序以及边缘浏览器，但同样的故障一次又一次发生。我也尝试过 flutter clean 命令，但得到了相同的结果。

我无法在此处上传视频，但我在 youtube 上有视频 Youtube video showing glitch

另外，源码如下：

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

正在此处上传 flutter doctor：

  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.

Answer 1

已解决。

SliverAppBar 有自己的小部件，它应该始终与 SliverListViews 和 SliverGridViews 一起使用。 The Boring Flutter Development Show, Ep. 12

WEB {Chrome 和 Edge} 中的 Flutter SliverAppBar 故障

Flutter SilverAppBar glitching in WEB{Chrome as well as Edge}

flutter

flutter-web