在列表顶部放置一个浮动的 app bar_app浮动目录-优快云博客

这篇博客介绍了如何在Flutter中通过CustomScrollView和SliverAppBar组件来实现一个浮动的appbar，同时结合SliverList展示可滚动的内容。示例代码展示了如何创建一个包含1000个ListTiles的列表，并在顶部设置一个可收缩的AppBar。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在列表顶部放置一个浮动的 app bar，是将 app bar 放在一个包含列表的 CustomScrollView 里。放在 CustomScrollView 里的可滚动列表和组件为 slivers。比如 SliverList、SliverGridList 和 SliverAppBar。实际上，ListView 和 GridView 组件底层使用的就是 SliverList 和 SliverGrid。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Floating App Bar';

    return MaterialApp(
      title: title,
      home: Scaffold(
        // No appbar provided to the Scaffold, only a body with a
        // CustomScrollView.
        body: CustomScrollView(
          slivers: <Widget>[
            // Add the app bar to the CustomScrollView.
            SliverAppBar(
              // Provide a standard title.
              title: Text(title),
              // Allows the user to reveal the app bar if they begin scrolling
              // back up the list of items.
              floating: true,
              // Display a placeholder widget to visualize the shrinking size.
              flexibleSpace: Placeholder(),
              // Make the initial height of the SliverAppBar larger than normal.
              expandedHeight: 200,
            ),
            // Next, create a SliverList
            SliverList(
              // Use a delegate to build items as they're scrolled on screen.
              delegate: SliverChildBuilderDelegate(
                // The builder function returns a ListTile with a title that
                // displays the index of the current item.
                (context, index) => ListTile(title: Text('Item #$index')),
                // Builds 1000 ListTiles
                childCount: 1000,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

https://flutter.cn/docs/cookbook/lists/floating-app-bar