Flutter:无法使用TabBar设置SliverPersistentHeader的首选高度

在Flutter中，SliverPersistentHeader 是一个可以固定在滚动视图中某个位置的组件，通常用于创建可滚动的导航栏或标题栏。如果你在使用 TabBar 与 SliverPersistentHeader 结合时遇到无法设置首选高度的问题，可能是由于布局约束或者组件使用方式不当导致的。

基础概念

SliverPersistentHeader: 这是一个可以随滚动而滑动的组件，但当它到达顶部时会固定在那里。
TabBar: 这是一个用于切换不同视图的标签栏。

类型与应用场景

固定头部: 当页面滚动时，头部保持在顶部不变。
滑动头部: 头部随着页面滚动而滑动，但在达到某个点后固定在顶部。

应用场景包括新闻应用、社交媒体应用等，其中导航栏需要在滚动时保持可见。

遇到的问题及原因

问题: 无法设置 SliverPersistentHeader 的首选高度。

原因: 这通常是因为 SliverPersistentHeader 的 delegate 没有正确地返回期望的大小，或者布局约束限制了其大小。

解决方法

要解决这个问题，你需要确保 SliverPersistentHeader 的 delegate 正确地返回了期望的大小。以下是一个示例代码，展示了如何设置 SliverPersistentHeader 的首选高度：

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: <Widget>[
            SliverPersistentHeader(
              pinned: true,
              delegate: _SliverAppBarDelegate(
                minHeight: 60.0,
                maxHeight: 120.0,
                child: Container(
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Header',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(title: Text('Item $index'));
                },
                childCount: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    required this.minHeight,
    required this.maxHeight,
    required this.child,
  });

  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => maxHeight;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

在这个示例中，_SliverAppBarDelegate 是一个自定义的 SliverPersistentHeaderDelegate，它定义了最小和最大高度，并且返回了一个 SizedBox.expand 包裹的子组件，这样可以确保头部组件能够扩展到指定的大小。