flutter - 如何在向上滚动时隐藏应用栏但向下滚动时显示?
问题描述
我正在尝试实现我们在 android WhatsApp 中看到的行为,并在材料设计中建议标签行为,请在此处查看建议和此处的视频 。当我向下滚动时,我希望标签栏可见但应用栏隐藏,这种行为也可以在中型 android 应用上看到。
我看到这里有一个较早的答案,但它对我不起作用。
我尝试了几种方法,但嵌套滚动视图对我不起作用。
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,
),
),
),
);
我的代码在这里可用。
有什么原因NestedScrollView
可能不起作用?
解决方案
尝试这个
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),
)),
],
),
),
),
);
}
}
输出:
推荐阅读
- c# - 如何以某种方式显示版本号
- amazon-web-services - Route53、证书管理器和 CloudFront 之间的 CloudFormation 循环依赖关系
- r - str_detect() 的意外结果
- node.js - Webpack 4 无法为 web 构建生产
- python - 为什么 mypy 常见问题解答提到性能影响?
- postgresql - 如何将 psql 元命令放入 psql 变量中以便稍后执行?
- python - 检查字符串是否包含列表中字符串的最快方法
- python - 在python中将JSON对象转换为CSV
- r - 在 glm 中选择什么虚拟变量作为参考?
- angular - Angular 8 Async Pipe 订阅问题