当用户在屏幕上滚动时,我想从 SliverAppBar 中“淡入”和“淡出”一个小部件。
这是我想做的一个例子:
这是我没有“褪色”的代码:
https://gist.github.com/nesscx/721cd823350848e3d594ba95df68a7fa
导入'package:flutter/material.dart';
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fading out CircleAvatar',
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
child: new SliverAppBar(
expandedHeight: 254.0,
pinned: false,
leading: Icon(Icons.arrow_back),
title:Text('Fade'),
forceElevated: innerBoxIsScrolled,
flexibleSpace: new FlexibleSpaceBar(
centerTitle: true,
title: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CircleAvatar(
radius: 36.0,
child: Text(
'N',
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: Colors.green,
),
Text('My Name'),
],
),
background: Container(
color: Colors.purple,
),
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
new TabBar(
indicatorColor: Colors.white,
indicatorWeight: 3.0,
tabs: <Tab>[
Tab(text: 'TAB 1',),
Tab(text: 'TAB 2',),
],
),
),
),
];
},
body: TabBarView(
children: <Widget>[
SingleChildScrollView(
child: Container(
height: 300.0,
child: Text('Test 1', style: TextStyle(color: Colors.black, fontSize: 80.0)),
),
),
SingleChildScrollView(
child: Container(
height: 300.0,
child: Text('Test 2', style: TextStyle(color: Colors.red, fontSize: 80.0)),
),
),
],
),
),
),
),
);
}
}
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(
color: Colors.deepPurple,
child: _tabBar,
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return false;
}
}
最佳答案
使用 ScrollController
和 Opacity
小部件实际上非常简单。这是一个基本示例:
https://gist.github.com/smkhalsa/ec33ec61993f29865a52a40fff4b81a2
https://stackoverflow.com/questions/51321804/
相关文章:
android - Flutter:在 Android Studio 中打开 android 模块被
firebase - 离线使用。 Flutter Hamilton 应用架构。写入节点并期望云函数更
flutter - Flutter 目录不是 GitHub 项目的克隆
ios - 如何在键盘外观上为 Flutter 布局设置动画
flutter - 在 FutureBuilder 中设置提供者值
dart - Flutter中是否有可能 "extend"ThemeData
string - flutter/Dart : Convert HEX color string t
dart - 错误状态 : Mock method was not called within `w