隐藏SliverPersistentHeader后如何更改视图

时间:2020-01-21 09:35:22

标签: flutter mobile dart appbar

我需要AppBar在向上滚动时显示其他视图。 有可能吗?

贝勒是我的尝试。但是...

这就是我需要的:

向下滚动时:

This is what I need

然后向上滚动

collapsed

但我现在有这个:

这是我的操作方式:

class DetailedEvent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
               body: CustomScrollView(
                 slivers: <Widget>[
                   SliverPersistentHeader(
                     pinned: true,
                     floating: false,
                     delegate: _SliverAppBarDelegate(),//HERE IS CUSTOM HEADER CLASS
                   )

在MainPage中使用的此类:

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {


double scrollAnimationValue(double shrinkOffset) {
    double maxScrollAllowed = maxExtent - minExtent;
    return ((maxScrollAllowed - shrinkOffset) / maxScrollAllowed)
        .clamp(0, 1)
        .toDouble();
  }

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    final tableTitleStyle =
        TextStyle(color: AppColors.appWhiteDarker, fontSize: 16);

    final tableValueStyle = TextStyle(color: AppColors.pureWhite, fontSize: 16);

    final double visibleMainHeight = max(maxExtent - shrinkOffset, minExtent);
    final double animationVal = scrollAnimationValue(shrinkOffset);
    return Container(
      height: visibleMainHeight,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          ...,
          Positioned(
            bottom: 0.0,
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[...],
              ),
            ),
          )
        ],
      ),
    );
  }

  @override...
}

this is what I have now

0 个答案:

没有答案