flutter - 如何在 Flutter 中获得 AppBar 标题的 shuch 效果?
问题描述
我怎样才能得到这样的 AppBar 标题效果,示例:
当页面滚动并出现在appBar中时,大标题“咖啡店”消失了。谢谢。
解决方案
可能你需要SliverAppBar
- 您也可以查看本教程
基于文章的示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainCollapsingToolbar());
}
}
class MainCollapsingToolbar extends StatefulWidget {
@override
_MainCollapsingToolbarState createState() => _MainCollapsingToolbarState();
}
class _MainCollapsingToolbarState extends State<MainCollapsingToolbar> {
ScrollController _scrollController = ScrollController();
double offset = 0.0;
@override
void initState() {
super.initState();
_scrollController.addListener(() {
setState(() {
offset = _scrollController.offset;
});
});
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: (offset == 0) ? false : true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
),
),
SliverPersistentHeader(
delegate: _SliverAppBarDelegate(
TabBar(
labelColor: Colors.black87,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(icon: Icon(Icons.info), text: "Tab 1"),
Tab(icon: Icon(Icons.lightbulb_outline), text: "Tab 2"),
],
),
),
pinned: true,
),
];
},
body: Center(
child: Text("Sample text"),
),
),
),
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate(this._tabBar);
final TabBar _tabBar;
@override
double get minExtent => _tabBar.preferredSize.height;
@override
double get maxExtent => _tabBar.preferredSize.height;
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return new Container(
child: _tabBar,
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return false;
}
}
推荐阅读
- ios - 迅捷;ViewController 从未取消初始化
- sql - 写入以输出所有更新的 ID
- swift - Swift 展开问题,视图控制器堆栈未更新
- python - 在 Tkinter 中上传文件后自动关闭窗口
- c# - 从字符串解析为浮点数时如何修复统一FormatException?
- android - 具有不等正方形的Android网格布局
- postgresql - postgres 在 index_only 扫描中表现不佳(1.000.000+ 循环)
- vb.net - 是否可以过滤输入到用 VB 制作的控制台应用程序中的数据类型?
- firebase - 一个文档中可以存在多少个字段?
- c++ - 仅在本地主机上工作的模拟 HTTP 身份验证