Question

我有一个带有sliverappbar的nestsscollcollview，当我按预期向下滚动时，它会缩小，但是当我向上滚动时，应用程序栏不会扩展，直到我到达顶部（到达列表中的第一项）并且我在查看文档中的示例后知道这是不正确的。它应该在您开始滚动时展开或收缩，而不是在您完成向上或向下滚动时

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(
      child: Container(
        child: Icon(//icon),
      ),
    ),
    Tab(
      child: Container(
        child: Icon(//icon),
      ),
    ),
    Tab(
      child: Container(
        child: Icon(
          //icon,
        ),
      ),
    ),
    Tab(
      child: Container(
        child: Icon(
          //icon,
        ),
      ),
    ),
  ];

  final List tabChildren = [
    Child1(

      key: PageStorageKey<String>('1'),
    ),
    Child2(
      key: PageStorageKey<String>('2'),
    ),
    Child3(
      key: PageStorageKey<String>('3'),
    ),
   Child4(
      key: PageStorageKey<String>('4'),
    ),
  ];




  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length)

  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: NestedScrollView(

        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            new SliverAppBar(


              title: Text(
                'Dummy text',
                style: Theme.of(context)
                    .textTheme
                    .title
                    .copyWith(color: Colors.white),
              ),
              pinned: true,
              floating: true,

              forceElevated: innerBoxIsScrolled,
              bottom: TabBar(

                controller: _tabController,
                tabs: myTabs,
              ),
            ),

          ];
        },

        body: TabBarView(
          controller: _tabController,
          children: [

            SafeArea(
              top: false,
              bottom: false,
              child: 

                tabChildren[0], // listView

            ),
            SafeArea(
              top: false,
              bottom: false,
              child: 

                tabChildren[1], // listView


            ),
            SafeArea(
              top: false,
              bottom: false,
              child: 
                tabChildren[2], // listView


            ),
            SafeArea(
              top: false,
              bottom: false,
              child:  

              tabChildren[3], // listView

            ),
          ],
        ),
      ),

    );
  }
}

Answer 1

设置以下属性。

snap: true,
floating: true

示例：

new SliverAppBar(

              title: Text(
                'Dummy text',
                style: Theme.of(context)
                    .textTheme
                    .title
                    .copyWith(color: Colors.white),
              ),
              floating: true,
              snap: true,
              forceElevated: innerBoxIsScrolled,
              bottom: TabBar(

                controller: _tabController,
                tabs: myTabs,
              ),
            ),

Answer 2

两个属性控制SliverAppBar的操作。 pinned和floating

您已经将pinned和floating都设置为true，即使这没错，但当两者都设置为true时，您将永远看不到实际的Sliver Motion。

要真正获得所谓的“扩展效果”，只需将floating设置为true。如果这不是您要查找的内容，则有关期望输出的图像或GIF可能会有助于获得正确的代码。

当我开始向上滚动时，sliverappbar不会扩展，只有当我再次回到列表顶部时，它才会扩展

2 个答案: