Question

希望这是一个简单的问题，我在CustomScrollView中有SliverPersistentHeader，它看起来像SliverPersistentHeader具有某种阴影/高程。有没有办法删除它（我在红色框中勾勒出阴影）？

请参见下图：

此基本主体是一个支架，带有来自_makeHeader调用的SliverPersistentHeader：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Consts.coMainBackground,
      body: CustomScrollView(
        slivers: <Widget>[
          _sliverAppBar(),
          _makeHeader(),
          BlocBuilder<AllPersonsBloc, AllPersonsState>(
            builder: (context, state) {
              if (state is AllPersonsLoading) {
                return _buildLoading();
              } else if (state is AllPersonsLoaded) {
                return _sliverList(context, state.persons);
              } else if (state is AllPersonsError) {
                return _buildErrorMessage(state.message);
              } else {
                return _buildErrorMessage('Unknown error!');
              }
            },
          ),
        ],
      ),
    );
  }

生成标题功能：

  Widget _makeHeader() {
    return SliverPersistentHeader(
      pinned: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 130.0,
        maxHeight: 130.0,
        child: Container(
          color: Consts.coForestGreenBackground,
          child: Container(
            decoration: BoxDecoration(
              color: Consts.coMainBackground,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))
            ),
            child: _cardHeader('People', Icons.search, 'Name')),
          )
      ),
    );
  }

最后是Delegate函数：

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });
  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => math.max(maxHeight, minHeight);

  @override
  Widget build(
      BuildContext context, 
      double shrinkOffset, 
      bool overlapsContent) 
  {
    return new SizedBox.expand(child: child);
  }
  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

还有卡头（实际上不是卡）

 Widget _cardHeader(String titleText, IconData inputIcon, String hint) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: standardEdgePadding),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(titleText, style: Consts.cardHeaderStyle,),
          Container(
            margin: EdgeInsets.only(top: 20),
            height: 40,
            decoration: BoxDecoration(
              color: Consts.inputGreen,
              borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: Icon(
                    inputIcon,
                    color: Consts.inputGreenText,
                    size: Consts.cardInputIconSize,
                  ),
                ),
                Flexible(child: TextField(
                  decoration: new InputDecoration.collapsed(
                    hintText: hint,
                    hintStyle: Consts.cardInputStyle,
                  ),
                ),)
              ],
            ),
          )
        ],
      ),
    );
  }

Answer 1

SliverPersistentHeader本身没有阴影，因此elevation的效果并非来自您的SliverPersistentHeader。从您的代码段来看，它不是明确的，但是我可以看到您的小部件树中有一个_cardHeader('People', Icons.search, 'Name')方法。我怀疑它在此方法返回的小部件树中包含一个Card小部件。

如the Card widget Flutter documentation所示，Card具有默认的非零elevation值，这可能在您的情况下蒙上阴影。查看小部件树中是否有任何Card小部件，并将其elevation参数设置为零。

Answer 2

事实证明是因为，我在一个容器内有一个容器：

Widget _makeHeader() {
    return SliverPersistentHeader(
      pinned: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 130.0,
        maxHeight: 130.0,
        child: Container(
          color: Consts.coForestGreenBackground,
          child: Container(
            //There seemed to be some spacing between the search header and the rest of the list, this takes care of it
            //transform: Matrix4.translationValues(0.0, 1.0, 0.0),
            decoration: BoxDecoration(
              color: Consts.coMainBackground,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))
            ),
            child: _cardHeader('People', Icons.search, 'Name')),
          )
      ),
    );
  }

Header“满足” SliverList的方式存在很小的差距（可能仅与模拟器有关）。因此，父容器中的“ coForestGreenBackground”颜色通过该间隙显示出来。没有实际的高程/阴影。

如果我取消注释代码，则间隙（在我最初的问题中也称为高程）消失。

昨晚我睡得很差，因为我无法停止思考自己在哪里犯了错误。感谢@drogel确认SliverPersistentHeader上没有实际的阴影/高程。

如何从SliverPersistentHeader移除海拔？

2 个答案: