Flutter SliverList 在 SliverAppBar 上重疊

Question

我試圖在SliverList上重疊幾個像素的SliverAppBar 。 我希望FlexibleSpaceBar中的圖像在我的 SliverList 半徑下為SliverList 。 我只能得到半徑。 無法將SliverAppBar重疊到SliverList上。

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中。

唯一的問題是靈活空間的淡出 animation（向下滾動時）會對頂部欄產生影響。 （因為它在flexibleSpace ）

由於SliverAppBar海拔高於SliverList 。 對小部件的任何縮放或轉換總是會得到與您預期相反的結果（SliverAppBar 在 SliverList 上重疊）。

我使用stack將頂部放在 FlexibleSpaceBar 中，將 collapseMode 設置為CollapseMode.pin並將 alignment 設置為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);
    });
}
});