Question

我正在尝试实现在Android WhatsApp中看到的行为，并建议材料设计中的选项卡行为，检查建议here和视频 here。当我向下滚动时，我希望标签栏可见，但应用栏隐藏，这种行为也可以在中等的Android应用上看到。

我看到有一个更早的答案here，但对我来说不起作用。

我尝试了几种方法，但是嵌套滚动视图对我不起作用。

 return DefaultTabController(
  length: 2,
  child:Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
         SliverAppBar(
            title: Text("Application"),
            floating: true,
            pinned: true,
            snap: true,
            bottom: TabBar(
              tabs: <Tab>[
               Tab(text: "T"),
               Tab(text: "B"),
              ], // <-- total of 2 tabs
            ),
          ),
        ];
      },
      body: TabBarView(
        children: <Widget>[
         RandomWords(),
         RandomWords(),
        ], 
      ),
    ),
  ),
);

并尝试了这一点，

Scaffold(
   body: NestedScrollView(
     controller: _scrollViewController,
     headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
       return <Widget>[
         SliverAppBar(
           title: Text("N"),
           pinned: true,
           floating: true,
           forceElevated: innerBoxIsScrolled,
           //snap: true,
           bottom: TabBar(
             tabs: <Tab>[
              Tab(text: "T"),
              Tab(text: "B"),
             ],
             controller: _tabController,
           ),
         )
       ];
     },
     body: TabBarView(
       children: <Widget>[
         RandomWords(),
         RandomWords(),
       ],
       controller: _tabController,
     ),
   ),
 ),
);

我的代码here可用。

NestedScrollView可能没有任何原因吗？

Answer 1

您可以使用SliverList和SliverAppBar

Answer 2

尝试一下

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: new Scaffold(
        body: new NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              new SliverAppBar(
                title: Text("Application"),
                floating: true,
                pinned: true,
                snap: true,
                bottom: new TabBar(
                  tabs: <Tab>[
                    new Tab(text: "T"),
                    new Tab(text: "B"),
                  ], // <-- total of 2 tabs
                ),
              ),
            ];
          },
          body: new TabBarView(
            children: <Widget>[
              Center(
                  child: Text(
                'T Tab',
                style: TextStyle(fontSize: 30),
              )),
              Center(
                  child: Text(
                'B Tab',
                style: TextStyle(fontSize: 30),
              )),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

如何在向上滚动时隐藏应用程序栏，而在向下滚动时隐藏呢？

2 个答案: