Flutter:将SliverAppbar与列小部件相结合_Flutter SliverAppBar和FlexibleSpaceBar，在向上滚动时呈现与FlexibleSpaceBar的标题参数不同的小部件_Flutter:如何将PageRoute动画与Navigator.of(context).pushNamed相结合 - 腾讯云开发者社区

基础概念

SliverAppBar 是 Flutter 中的一个小部件，用于在 CustomScrollView 中创建可滚动的应用栏。它提供了丰富的定制选项，如标题、副标题、图标、背景颜色等。Column 小部件则是 Flutter 中的一个布局小部件，用于垂直排列其子小部件。

类型

固定式 SliverAppBar：始终显示在屏幕顶部，不随滚动而移动。
可折叠式 SliverAppBar：随着内容的滚动，应用栏可以折叠或展开。

应用场景

这种组合常用于新闻应用、社交媒体、阅读器等需要展示大量内容的场景。通过滚动，用户可以查看更多的内容，同时应用栏可以根据滚动位置动态调整显示内容。

示例代码

以下是一个简单的示例，展示如何将 SliverAppBar 与 Column 小部件相结合：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              title: Text('SliverAppBar with Column'),
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset(
                  'assets/image.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}