Flutter SliverAppBar 在 WEB{Chrome 和 Edge} 中出现故障

标签 flutter flutter-web

因此,我制作了一个简单的 Web 应用程序,其中包含使用 SilverAppBar 的 flutter。 问题出现在滚动中。 当我滚动它时,当光标从 SilverAppBar 上移开时,它会自动转到顶部。 我不知道是什么导致了这个问题。我已经在 Chrome 和 Edge 浏览器上运行了该应用程序,但同样的故障一次又一次发生。我也尝试过 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.

最佳答案

已解决。

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

关于Flutter SliverAppBar 在 WEB{Chrome 和 Edge} 中出现故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62399541/

相关文章:

筛选数据后显示的 Flutter ListView 分隔符

flutter - 如何在 Flutter 中使用 Material 3 表面色调?

Flutter 小部件测试在选择另一个项目时不会触发 DropdownButton.onChanged

flutter - 检测文本中的@并将其显示为链接(Flutter)

datetime - 如何在 flutter 中使用 `` `DateTime ``` 显示月份

Flutter Bloc 不会改变 TextFormField initialValue

flutter - 是否可以在 flutter web 的同一页面中创建指向部分的链接?

flutter - 是否可以在 Flutter 中编译有条件的代码?

flutter - 尝试为 flutter_web 项目提供服务时无法创建本地服务器(地址已被使用)