Question

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

我专注于如何使用Sliver应用程序栏上的 CircleAvatar 和 Text 小部件。

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;
  }
}

Answer 2

有一个使用SliverPersistentHeader和SliverPersistentHeaderDelegate的示例。在此示例中，当您向上滚动时，标题将重新调整大小，并且按钮将消失

slivers: <Widget>[
      makeHeader(),
      // You can put more slivers here       
],

这是makeHeader方法：

SliverPersistentHeader makeHeader() {
    return SliverPersistentHeader(
      pinned: pinned,
      floating: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 200.0,
      ),
    );
  }

和_SliverAppBarDelegate类：

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;

  _SliverAppBarDelegate(
      {@required this.minHeight,
      @required this.maxHeight,
      this.hideButtonWhenExpanded = true});

  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => math.max(maxHeight, minHeight);
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    final appBarSize = maxHeight - shrinkOffset;
    final proportion = 2 - (maxHeight / appBarSize);
    final photoToButton = 160 * proportion;
    final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;

    return new SizedBox.expand(
      child: Container(
        color: Colors.white,
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Positioned(
              top: 10.0,
              child: CircleAvatar(
                minRadius: 20.0,
                maxRadius: 75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
                backgroundImage: NetworkImage(
                    'https://randomuser.me/api/portraits/men/75.jpg'),
              ),
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: photoToButton,
              child: Opacity(
                opacity: percent,
                child: FlatButton(
                  onPressed: () {},
                  child: Text(
                    'Add Contact',
                    style: TextStyle(
                        color: Colors.blue, fontSize: 14.0 * proportion),
                  ),
                ),
              ),
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: appBarSize - 1.0 > 59.0 ? appBarSize - 1 : 59.0,
              child: const Divider(
                // color: Colors.grey,
                height: 1,
                thickness: 0.5,
              ),
            )
          ],
        ),
      ),
    );
  }

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

如何将小部件添加到Sliver App Bar区域？

2 个答案: