【发布时间】：2019-01-27 14:48:13
【问题描述】：
考虑这张图片。如您所见，它有一个应用栏，而应用栏有选项卡式按钮。 我正在尝试为 appbar 设置动画，以便它在向上滚动时隐藏，并且仅显示选项卡按钮，而在向上滚动时，appbar 会出现。请帮帮我。抱歉英语不好，不是美国人，我也不是英语
【问题讨论】：
-
您可能应该在屏幕截图中编辑手机号码列表。
【发布时间】：2019-01-27 14:48:13
【问题描述】：
如果我理解正确，下面的代码应该让应用栏在滚动时隐藏，而 TabBar 保持可见：
空安全码：
class _SomePageState extends State<SomePage> with SingleTickerProviderStateMixin {
late final TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text('Weight Tracker'),
pinned: true,
floating: true,
forceElevated: innerBoxIsScrolled,
bottom: TabBar(
tabs: <Tab>[
Tab(text: 'STATISTICS'),
Tab(text: 'HISTORY'),
],
controller: _tabController,
),
),
];
},
body: TabBarView(
controller: _tabController,
children: <Widget>[
StatisticsPage(),
HistoryPage(),
],
),
),
);
}
}
来自this post的示例。
【讨论】：
-
非常感谢先生
-
你们如何制作 gif 截图？
-
我使用
adb shell screenrecord，然后使用adb pull，然后我使用ezgif.com/video-to-gif在线将mp4转换为gif -
嘿@MarcinSzałek，当我滚动一页（例如统计）时，另一页也会滚动。我该如何避免这种情况？
-
1.
_scrollViewController是什么？
使用DefaultTabController
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),
)),
],
),
),
),
);
输出：
【讨论】：
我建议你必须通过 SliverAppBar 和 SliverList 来实现你的布局。 以下代码可以帮助您理解这一点。
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',
home: new MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
List buildTextViews(int count) {
List<Widget> strings = List();
for (int i = 0; i < count; i++) {
strings.add(new Padding(padding: new EdgeInsets.all(16.0),
child: new Text("Item number " + i.toString(),
style: new TextStyle(fontSize: 20.0))));
}
return strings;
}
return Scaffold(
body: new CustomScrollView(slivers: <Widget>[
const SliverAppBar(
title: const Text('Sliver App Bar'),
),
new SliverList(
delegate: new SliverChildListDelegate(buildTextViews(50)))
])
);
}
}
【讨论】：
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
bool _showAppbar = true;
ScrollController _scrollBottomBarController = new ScrollController();
bool isScrollingDown = false;
bool _show = true;
double bottomBarHeight = 75;
double _bottomBarOffset = 0;
@override
void initState() {
super.initState();
myScroll();
}
@override
void dispose() {
super.dispose();
_scrollBottomBarController.removeListener(() {});
super.dispose();
}
void showBottomBar() {
setState(() {
_show = true;
});
}
void hideBottomBar() {
setState(() {
_show = false;
});
}
void myScroll() async {
_scrollBottomBarController.addListener(() {
if (_scrollBottomBarController.position.userScrollDirection ==
ScrollDirection.reverse) {
if (!isScrollingDown) {
isScrollingDown = true;
_showAppbar = false;
hideBottomBar();
}
}
if (_scrollBottomBarController.position.userScrollDirection ==
ScrollDirection.forward) {
if (isScrollingDown) {
isScrollingDown = false;
_showAppbar = true;
showBottomBar();
}
}
});
}
Widget containterContent(){
return Container(
height: 50.0,
color: Colors.cyanAccent,
margin: EdgeInsets.all(8.0),
width: MediaQuery.of(context).size.width - 100,
child: Center(child: Text('Item 1',
style: TextStyle(
fontSize: 14.0,
),)),
);
}
Widget body() {
return ListView(
controller: _scrollBottomBarController,
children: <Widget>[
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _showAppbar
? AppBar(
title: Text('My Tasks'),
)
: PreferredSize(
child: Container(),
preferredSize: Size(0.0, 0.0),
),
bottomNavigationBar: Container(
height: bottomBarHeight,
width: MediaQuery.of(context).size.width,
child: _show
?BottomNavigationBar(
currentIndex: 0, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile'))
],
)
: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
),
),
body: body(
),
);
}
}
【讨论】：
-
欢迎来到 Stack Overflow！虽然此代码 sn-p 可能是解决方案，但including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。
-
感谢您的解决方案！这是唯一一个不使用任何银条的
通过使用带有 NestedScrollView 的 SliverAppbar，我能够制作类似于 WhatsApp 的带有标签栏的浮动应用栏。
在 NestedScrollView 中添加 floatHeaderSlivers: true 和
固定：真，浮动：真，在 SliverAppBar 中
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: CustomSliverAppbar(),
);
}
}
class CustomSliverAppbar extends StatefulWidget {
@override
_CustomSliverAppbarState createState() => _CustomSliverAppbarState();
}
class _CustomSliverAppbarState extends State<CustomSliverAppbar>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
_tabController = TabController(
initialIndex: 0,
length: 2,
vsync: this,
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text(
"WhatsApp type sliver appbar",
),
centerTitle: true,
pinned: true,
floating: true,
bottom: TabBar(
indicatorColor: Colors.black,
labelPadding: const EdgeInsets.only(
bottom: 16,
),
controller: _tabController,
tabs: [
Text("TAB A"),
Text("TAB B"),
]),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
TabA(),
const Center(
child: Text('Display Tab 2',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
],
),
),
);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
}
class TabA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scrollbar(
child: ListView.separated(
separatorBuilder: (context, child) => Divider(
height: 1,
),
padding: EdgeInsets.all(0.0),
itemCount: 30,
itemBuilder: (context, i) {
return Container(
height: 100,
width: double.infinity,
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
);
},
),
);
}
}
【讨论】：
截图：
代码：
正如我提到的here，你可以像这样使用NestedScrollView：
@override
Widget build(BuildContext context) {
return Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
title: Text('AppBar'),
pinned: true,
floating: true,
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.call), text: 'Call'),
Tab(icon: Icon(Icons.message), text: 'Message'),
],
),
),
];
},
body: TabBarView(
children: [
FlutterLogo(),
FlutterLogo(),
],
),
),
),
);
}
【讨论】：