如何 SliverAppBar 始终显示阴影 - 展开模式也是如此

Question

我正在使用 SliverAppBar 在折叠时有阴影（滚动列表）感谢

elevation

属性但我也想在SliverAppBar为Expanded

时有阴影

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,

上使用

SliverAppBar

，默认情况下它是假的。

默认为 false，这意味着 [elevation] 仅在 [AppBar] 显示在其下方滚动的内容之上。
当设置为 true 时，[elevation] 将被应用而不管。

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

它能解决您的问题吗？

Answer 2

像这样将此属性用于 SliverAppBar Widget-

SliverAppBar( forceElevated: true, //这是为了在你的appbar之后随时显示高程阴影颜色而无需滚动。 elevation: 2, // 这是你的 elevation 颜色，比如应用栏底部的阴影。

如果有任何问题你也可以问...