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

Question

由于 elevation 属性，我正在使用 折叠时有阴影(滚动列表)的 SliverAppBar，但我也希望在 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

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

Defaults to false, meaning that the [elevation] is only applied when the[AppBar] is being displayed over content that is scrolled under it.
When set to true, the [elevation] is applied regardless.

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

它能解决您的问题吗？