时间戳

首页 > 解决方案 > 如何以编程方式折叠或展开 SliverPresistentHeader [自定义浮动应用栏]

flutter - 如何以编程方式折叠或展开 SliverPresistentHeader [自定义浮动应用栏]

问题描述

我正在尝试使用来自值的引用以编程方式折叠或展开SliverPresistantHeader 。shrinkOffset我到处寻找如何实现这个功能，但我找不到任何解决方案（所以我在这里问）。

这是我的自定义SliverP ResistanceHeaderDelegate的代码：

import 'package:bom/constants/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class BomAppHeader implements SliverPersistentHeaderDelegate {
  BomAppHeader({
    this.expandedHeight,
    this.title,
    this.body,
    @required this.notificationShade,
  });

  final double notificationShade;
  final double expandedHeight;
  final Widget title;
  final Widget body;

  @override
  double get maxExtent {
    if (expandedHeight == null || expandedHeight < kToolbarHeight) {
      return minExtent;
    } else {
      return notificationShade + expandedHeight;
    }
  }

  @override
  double get minExtent {
    return title == null
        ? notificationShade
        : notificationShade + kToolbarHeight;
  }

  double bodyOpacity(double shrinkOffset) {
    return max(0.0, 1 - (shrinkOffset / (maxExtent - minExtent)));
  }

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    // print(max(0.0, 1 - (shrinkOffset / (maxExtent - minExtent))));

    return Stack(
      fit: StackFit.expand,
      children: [
        Container(
          decoration: kAppBarDecoration,
        ),
        Opacity(
          opacity: bodyOpacity(shrinkOffset),
          child: Container(
            height: maxExtent > minExtent ? double.infinity : 0.0,
            margin: title == null
                ? EdgeInsets.only(top: notificationShade + 2)
                : EdgeInsets.only(
                    top: notificationShade, bottom: kToolbarHeight),
            padding: EdgeInsets.all(8.0),
            child: body,
          ),
        ),
        Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          SizedBox(
            height: notificationShade,
          ),
          Container(
            height: title == null ? 0.0 : kToolbarHeight,
            padding: EdgeInsets.all(5.0),
            child: title,
          ),
        ]),
      ],
    );
  }

  double titleOpacity(double shrinkOffset) {
    // simple formula: fade out text as soon as shrinkOffset > 0
    return 1.0 - max(0.0, shrinkOffset) / maxExtent;
    // more complex formula: starts fading out text when shrinkOffset > minExtent
    //return 1.0 - max(0.0, (shrinkOffset - minExtent)) / (maxExtent - minExtent);
  }

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }

  @override
  // TODO: implement showOnScreenConfiguration
  PersistentHeaderShowOnScreenConfiguration get showOnScreenConfiguration =>
      null;

  @override
  // TODO: implement snapConfiguration
  FloatingHeaderSnapConfiguration get snapConfiguration => null;

  @override
  // TODO: implement stretchConfiguration
  OverScrollHeaderStretchConfiguration get stretchConfiguration => null;

  @override
  // TODO: implement vsync
  TickerProvider get vsync => null;
}

到目前为止，我还没有找到任何解决方案来实现这一点，仍在网上冲浪。

标签： flutterflutter-sliverflutter-sliverappbar

解决方案

将滚动控制器添加到“自定义滚动视图”

ScrollController _scrollController;

Widget build(BuildContext context) {
_scrollController = ScrollController();
return Scaffold(
body: CustomScrollView( shrinkWrap: true, controller: _scrollController,
physics: BouncingScrollPhysics(),
slivers: <Widget>[
SliverAppBar(
pinned: false,
:
:
:
onPressed: () {// Scroll to top when on click => Expand 
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration:Duration(milliseconds:1300),
curve: Curves.decelerate,);
 },

onPressed: () {// Scroll to bottom when on click => Collapse
scrollController.animateTo(
    scrollController.position.maxScrollExtent,
    duration: Duration(milliseconds: 1300),
    curve: Curves.decelerate,
  );
 },

推荐阅读