首页 > 解决方案 > 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.

标签: flutterflutter-web

解决方案


解决了。

SliverAppBar 有自己的小部件,它应该始终与 SliverListViews 和 SliverGridViews 一起使用。 无聊的 Flutter 开发秀,Ep。12


推荐阅读