扑-滚动到最上方的酷滚动显示标题/导航选项卡

https://www.facebook.com/christianadrian.domantay/videos/10213737691517013/

这是我在Facebook上看到的一个颤抖应用程序的视频。

我可以问一下如何通过以下方式完成此操作:

  • 向上滚动并删除顶部
  • 然后标签导航出现在顶部
  • 然后标题显示在顶部
  • 仍然能够滚动列表

我想获得有关使用的技术以及可能的示例的答案。我看过一些示例,但我想在这里注册。因为这对于基于仪表板的实施会很有帮助。

iCMS 回答:扑-滚动到最上方的酷滚动显示标题/导航选项卡

您需要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),);
  }
}
本文链接:https://www.f2er.com/2089338.html

大家都在问