如何使 SliverAppBar 始终显示阴影 - 扩展模式

Question

我正在使用 SliverAppBar，由于该属性，它在折叠（列表滚动）时有阴影elevation，但我也希望在SliverAppBar展开时有阴影

class SuperSliverAppBar extends StatelessWidget {
  const SuperSliverAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      pinned: true,
      floating: false,
      snap: false,
      backgroundColor: Colors.grey[200],
      collapsedHeight: 90,
      expandedHeight: 200,
      elevation: 0,
      centerTitle: false,
      title: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("Mr Mister",
              style: TextStyle(
                color: Colors.black,
                fontSize: 22,
              ),
              textAlign: TextAlign.left),
          Row(
            children: [
              Text("Hello Mister",
                  style: TextStyle(
                    color: Colors.black,
                    fontFamily: 'Lato',
                    fontWeight: FontWeight.w300,
                    fontSize: 19,
                  ),
                  textAlign: TextAlign.left),
              SizedBox(width: 10),
              Container(
                  height: 20,
                  width: 20,
                  decoration: BoxDecoration(
                      color: Colors.orange,
                      borderRadius: BorderRadius.all(Radius.circular(1))),
                  child: Center(
                      child: Text("",
                          style: TextStyle(color: Colors.white, fontSize: 10))))
            ],
          ),
        ],
      ),
//Shape is defined here
      shape: const ContinuousRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100),
              bottomRight: Radius.circular(100))),
      flexibleSpace: FlexibleSpaceBar(
        collapseMode: CollapseMode.none,
        background: Container(),
        centerTitle: true,
      ),
    );
  }
}

Answer 1

使用forceElevated: true,on SliverAppBar，默认为 false。

默认为 false，这意味着仅当 [AppBar] 显示在其下方滚动的内容上方时才应用 [elevation]。
当设置为 true 时，无论如何都会应用 [elevation]。

   return SliverAppBar(
      forceElevated: true, //* here 
       elevation: 20, //* question having 0 here
      pinned: true,
      floating: false,

它能解决您的问题吗？