https://www.facebook.com/christianadrian.domantay/videos/10213737691517013/
这是我在Facebook上看到的一个颤抖应用程序的视频。
我可以问一下如何通过以下方式完成此操作:
- 向上滚动并删除顶部
- 然后标签导航出现在顶部
- 然后标题显示在顶部
- 仍然能够滚动列表
我想获得有关使用的技术以及可能的示例的答案。我看过一些示例,但我想在这里注册。因为这对于基于仪表板的实施会很有帮助。
https://www.facebook.com/christianadrian.domantay/videos/10213737691517013/
这是我在Facebook上看到的一个颤抖应用程序的视频。
我可以问一下如何通过以下方式完成此操作:
我想获得有关使用的技术以及可能的示例的答案。我看过一些示例,但我想在这里注册。因为这对于基于仪表板的实施会很有帮助。
您需要CustomScrollView,SliverAppBar。在SliverAppBar内部,您需要具有灵活的空间小部件。 转到 DART PAD 并粘贴以下代码以查看其工作方式。 这是您的示例:
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const BouncingScrollPhysics(),slivers: <Widget>[
SliverAppBar(
stretch: true,pinned: true,onStretchTrigger: () {
// Function callback for stretch
return;
},expandedHeight: 300.0,flexibleSpace: FlexibleSpaceBar(
stretchModes: <StretchMode>[
StretchMode.zoomBackground,StretchMode.blurBackground,StretchMode.fadeTitle,],centerTitle: true,title: const Text('Flight Report'),background: Stack(
fit: StackFit.expand,children: [
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',fit: BoxFit.cover,),const DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment(0.0,0.5),end: Alignment(0.0,0.0),colors: <Color>[
Color(0x60000000),Color(0x00000000),SliverList(
delegate: SliverChildBuilderDelegate((c,i){
return ListTile(title: Text("$i"));
},childCount: 10),);
}
}