Flutter SliverList 在 SliverAppBar 上重叠

Question

我正在尝试将SliverList 与SliverAppBar 重叠几个像素。我希望FlexibleSpaceBar 中的图像位于我的SliverList 的半径范围内。我只能得到半径。无法将SliverList 重叠到SliverAppBar.

return CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: [
        SliverAppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          expandedHeight: getProportionateScreenHeight(350),
          automaticallyImplyLeading: false,
          pinned: true,
          stretch: true,
          leading: Container(
            padding: EdgeInsets.fromLTRB(8.0, 8.0, 0.0, 0.0),
            child: SizedBox(
              height: getProportionateScreenWidth(40),
              width: getProportionateScreenWidth(40),
              child: FlatButton(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(60),
                ),
                color: Colors.white,
                padding: EdgeInsets.zero,
                child: Icon(Icons.arrow_back_ios),
                onPressed: () => Navigator.pop(context),
              ),
            ),
          ),
          actions: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(0.0, 8.0, 8.0, 0.0),
              child: SizedBox(
                height: getProportionateScreenWidth(40),
                width: getProportionateScreenWidth(40),
                child: FlatButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(60),
                  ),
                  color: Colors.white,
                  padding: EdgeInsets.zero,
                  child: Icon(Icons.more_vert),
                  onPressed: () {}
                ),
              ),
            ),
          ],
          flexibleSpace: FlexibleSpaceBar(
            //title: Text(_event.Title),
            centerTitle: true,
            stretchModes: [
              StretchMode.zoomBackground
            ],
            background: Stack(
              fit: StackFit.expand,
              children: <Widget>[
                Image.asset('assets/images/events/sunset.jpg', fit: BoxFit.cover),
                DecoratedBox(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment(0.0, 0.5),
                      end: Alignment(0.0, 0.0),
                      colors: <Color>[
                        Color(0x60000000),
                        Color(0x00000000),
                      ],
                    ),
                  ),
                ),
              ]
            )
          )
        ),
        SliverList(
          delegate: SliverChildListDelegate([
            Column(
              children: [
                Container(
                  padding: EdgeInsets.only(top: getProportionateScreenHeight(20), bottom: getProportionateScreenHeight(100)),
                  child: EventDescription(event: _event),
                  decoration: BoxDecoration(
                    color: Color(0xFFF5F6F9),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(40),
                      topRight: Radius.circular(40),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: Offset(0, 0), // changes position of shadow
                      ),
                    ],
                  )
                ),
              ],
            )
          ]),
        )
      ]
    );

Answer 1

您想使用解决方法吗？ 我的解决方案是将 SliverList 的顶部放在 SliverAppBar 内。

唯一的问题是弹性空间的淡出动画（向下滚动时）对顶栏有影响。（因为它在flexibleSpace中）

由于SliverAppBar 海拔高于SliverList。任何 Scale 或 Translate 到小部件的结果总是与您的预期相反（SliverAppBar 在 SliverList 上重叠）。

我使用stack将顶部放入FlexibleSpaceBar，将collapseMode设置为CollapseMode.pin并将对齐设置为Alignment.bottomCenter：

SliverAppBar(
  ...
  flexibleSpace: FlexibleSpaceBar(
    collapseMode: CollapseMode.pin,
    ...
    background: Stack(
      ...
      children: [
        ...
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            child: Container(
              height: _height, // 40
            ),
            decoration: BoxDecoration(
              color: Color(0xFFF5F6F9),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40),
                topRight: Radius.circular(40),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 0), // changes position of shadow
                ),
              ],
            ),
          ),
        ),
      ]
     ...

如果您需要像默认设置一样使用collapseMode: CollapseMode.parallax，则_height 需要在滚动期间是动态的。

void initState(){
  _scrollController = ScrollController()..addListener(() {
    setState(() {
      _height = math.max(_scrollController.offset*_topBarFactor +_topBarHeight,_topBarHeight);
    });
}
});