如何修复 SliverAppBar Flutter 中包裹的自定义应用栏高度

Question

我正在尝试在滚动隐藏时开发应用栏。我已成功创建但应用栏很小

下面的代码为我提供了这样的 appbar

@override
Widget build(BuildContext context) {
  return Scaffold(
   body: NestedScrollView(
     headerSliverBuilder: (context, innerBoxIsScrolled) {
    return <Widget>[
      SliverAppBar(        
        backgroundColor: Colors.transparent,   
        title: PreferredSize(
            child: ClipPath(
              clipper: CustomAppBar(),
              child: Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      ' Bike Guru',
                      style: GoogleFonts.caveatBrush(
                        fontSize: 40,
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            preferredSize: Size.fromHeight(kToolbarHeight + 350)),
        floating: true,
        pinned: false,
      ),


    ];
    },

我试图获得向下滚动时隐藏的结果

自定义应用条形码

class CustomAppBar extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = new Path();

path.lineTo(0, size.height);
path.quadraticBezierTo(
    size.width / 4, size.height - 40, size.width / 2, size.height - 20);

path.quadraticBezierTo(
    3 / 4 * size.width, size.height, size.width, size.height - 20);

path.lineTo(size.width, 0);

return path;
}

@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;

} }

Answer 1

这只是您可能需要SliverPersistentHeader小部件来修复高度和宽度的问题的概述

NestedScrollView(
  physics: NeverScrollableScrollPhysics(),
  controller: this._scrollController1,
  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
       SliverPersistentHeader(
         floating: false,
         pinned: false,
         delegate: SliverAppBarDelegate(
           minHeight: AppConfig.trendHeaderImageHeight,
           maxHeight: AppConfig.trendHeaderImageHeight,
           child: trendingHeader,
         )
       )
    ];
  },
  body: CustomScrollView(
    controller: this._scrollController2
    ...
  ),
);