美文网首页
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