flutter - 如何将小部件添加到 Sliver 应用栏区域？

Question

我想在 Sliver AppBar 区域添加小部件，让它感觉更自然。AppBar 可以自由添加图像，但它是否具有添加更多小部件的功能？

我专注于如何在 sliver appbar 上使用那些CircleAvatar和Text小部件。

标签： flutter

Answer 1

您将无法使用 SliverAppBar 做到这一点：/。

您应该做的是将 SliverPersistentHeader 与 SliverPersistentHeaderDelegate 一起使用。

您将不得不编写更多代码，但不要写太多:)。

例子：

slivers = [
  SliverPersistentHeader(
    pinned: True,
    delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 250.
    ),
  ),
  SliverList(
    delegate: SliverChildListDelegate([
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 25.0),
        child: Column(
          children: ...
        ),
      )
    ]),
  ),


];

...
class _SliverAppBarDelegate extends x {
  _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 => math.max(maxHeight, minHeight);

  @override
  Widget build(
      BuildContext context,
      double shrinkOffset,
      bool overlapsContent)
  {

    return new SizedBox.expand(
        child: LayoutBuilder(
            builder: (_, constraints) {
               DO WHAT YOU WANT HERE !
            }
        )
    );
  }

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