flutter - Flutter SliverAppBar,折叠背景填充前导空间
问题描述
我想使用创建一个长条列表视图,SliverAppBar
这样当我向上滚动列表时,主体内的图标会缩小以发生在leading
appBar 的空间中。
这里的图像显示了我想要实现的目标。当我向上滚动时,图表应该向上移动并在标题旁边滑动。(类似于英雄小部件的东西)
到目前为止,我尝试过SliverAppBar
,但未能成功。我很高兴使用其他一些小部件来实现这一点。谢谢你。
解决方案
你试过这个吗?
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//Variables needed to adapt FlexibleSpaceBar text color (title)
ScrollController _scrollController;
bool lastStatus = true;
double height = 200;
void _scrollListener() {
if (_isShrink != lastStatus) {
setState(() {
lastStatus = _isShrink;
});
}
}
bool get _isShrink {
return _scrollController.hasClients &&
_scrollController.offset > (height - kToolbarHeight);
}
@override
void initState() {
super.initState();
_scrollController = ScrollController()..addListener(_scrollListener);
}
@override
void dispose() {
_scrollController.removeListener(_scrollListener);
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: height,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: _isShrink
? Row(
children: [
//Replace container with your chart
// Here you can also use SizedBox in order to define a chart size
Container(
margin: EdgeInsets.all(10.0),
width: 30,
height: 30,
color: Colors.yellow),
Text('A little long title'),
],
)
: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'A little long title',
textAlign: TextAlign.center,
),
//Replace container with your chart
Container(
height: 80,
color: Colors.yellow,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Your chart here'),
],
),
),
]),
),
),
),
];
},
body: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return Container(
height: 40,
child: Text(index.toString()),
);
},
),
),
);
}
}
推荐阅读
- c++ - 每个循环的差异
- angular - 如何在整个 Angular 应用程序中使用实例服务?
- android - 我无法通过三星 S9+ 的 DatagramSocket 发送 DatagramPacket(我使用的不是 UI 线程)
- reactjs - 根据条件响应 Apollo Query
- ios - SuperpoweredAdvancedAudioPlayer 无法在 iOS13 中打开“ipod-library”路径
- c++ - 如何将包含多个数字的字符串转换为整数并将其存储在向量中
- javascript - 如何禁用 TestCafe cookie 处理机制以允许默认浏览器 document.cookie 列表?
- sql - 为什么 Postgres 查询计划器受 LIMIT 影响?
- javascript - 修复了 IE 11 和 Microsoft Edge 中表格的标题
- python - 为什么我的 Python 脚本给出的模数不正确?