美文网首页
flutter-在列表顶部放置一个浮动的 app bar

flutter-在列表顶部放置一个浮动的 app bar

作者: GitArtOS | 来源:发表于2024-05-06 15:44 被阅读0次

    通过 CustomScrollView 来生成一个带有随着用户滑动列表同时会在屏幕外随之滚动的 app bar 的列表。

    1. 创建一个 CustomScrollView

    2. 通过 SliverAppBar 来添加一个浮动的 app bar

    3. 通过 SliverList 来添加列表

    效果:


    截屏2024-05-07 15.42.46.png
    
    class Sliver_customScrollView extends StatelessWidget {
      const Sliver_customScrollView({super.key});
    
      @override
      Widget build(BuildContext context) {
        return CustomScrollView(
          slivers: [
           const SliverAppBar(
              title: Text("Floating APP Bar"),
              floating: false,
              flexibleSpace: Placeholder(color: Colors.red,),
              expandedHeight: 20.0,
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(title: Text("List Item $index")),
                childCount: 100,
              ))
    
          ],
    
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter-在列表顶部放置一个浮动的 app bar

          本文链接:https://www.haomeiwen.com/subject/ckwlfjtx.html