去除SliverAppBar底部边框-Flutter

Question

我想删除上图中突出显示的边框。我找不到任何解决方案来解决这个问题:(

这是我的 SliverAppBar 代码：

NestedScrollView(
        headerSliverBuilder: (BuildContext ctx, isScrolled) {
            return <Widget>[
               SliverAppBar(
                  title: Text('Applying to this job opportunity'),
                  pinned: true,
                  titleSpacing: 0,
                  floating: true,
                  expandedHeight: 180,
                  flexibleSpace: //some widgets
             )
        ]
    }
)

Answer 1

只需将

elevation

属性设置为

0

。

 SliverAppBar(
                  title: Text('Applying to this job opportunity'),
                  pinned: true,
                  elevation: 0,
                  titleSpacing: 0,
                  floating: true,
                  expandedHeight: 180,
                  flexibleSpace: //some widgets
             )

更多信息：https://api.flutter.dev/flutter/material/SliverAppBar/elevation.html

Answer 2

我来这里想知道如何去除阴影，但保留边框。答案是：

将

elevation

的

SliverAppBar

设置为

1

SliverAppBar(
  elevation: 1,
  // ...
)

结果：

Answer 3

如果您有两条颜色相同的棉条，那么多年来，这将是一个长期持续且令人烦恼的问题。

当前最好的解决方法就在这里（https://github.com/flutter/flutter/issues/37578#issuecomment-640302364），通过在你的条子周围添加一个阴影框。

你必须尝试哪种条子最适合添加盒子阴影以及如何添加阴影。

我的就是这样，它填充了条子顶部和底部的线条。

boxShadow: [
  BoxShadow(
    color: myColor,
    blurRadius: 0.0,
    spreadRadius: 1.0,
    offset: Offset(0, 0),
   ),
],

Answer 4

从我这边来看，底部边框仍然显示。与此问题相关https://github.com/flutter/flutter/issues/16262

所以我必须将脚手架的背景设置为与子窗口小部件的背景相同才能解决此问题。

这似乎只发生在某些手机上。

https://github.com/flutter/flutter/issues/16262#issuecomment-379071933

如果将 Scaffold 的主体包含在 SizedBox.expand 小部件中，则 body 总是会填满剩余的空间。然后，正如你所指出的， 指定支架的背景颜色，隐藏了问题。

-> 有问题

Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
          controller: _scrollController,
          slivers: <Widget>[
            SliverAppBar(
                pinned: true,
                snap: false,
                floating: false,
                elevation: 0.0, // Remove AppBar bottom border
                leading: new Container(),
                titleSpacing: 0,
                expandedHeight: 100.0,
                flexibleSpace: LayoutBuilder(
                    builder: (BuildContext context, BoxConstraints constraints) {
                      top = constraints.biggest.height;
                      return FlexibleSpaceBar(
                        centerTitle: true,
                        titlePadding: EdgeInsets.zero,
                        title: top >= 86
                            ? null
                            : topToolBarWidget(),
                        background: sliverBackgroundWidget()
                      );
                    })),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  PromotionSlider()
                ],
              ),
            ),
          ],
        ));
  }

-> 通过添加背景修复

  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: appPrimaryColor, // <---- add here
        body: CustomScrollView(
          controller: _scrollController,
          slivers: <Widget>[
            SliverAppBar(
                pinned: true,
                snap: false,
                floating: false,
                elevation: 0.0, // Remove AppBar bottom border
                leading: new Container(),
                titleSpacing: 0,
                expandedHeight: 100.0,
                flexibleSpace: LayoutBuilder(
                    builder: (BuildContext context, BoxConstraints constraints) {
                      top = constraints.biggest.height;
                      return FlexibleSpaceBar(
                        centerTitle: true,
                        titlePadding: EdgeInsets.zero,
                        title: top >= 86
                            ? null
                            : topToolBarWidget(),
                        background: sliverBackgroundWidget()
                      );
                    })),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  PromotionSlider()
                ],
              ),
            ),
          ],
        ));
  }

Answer 5

正如ltk所说，你可以添加阴影。我只是向您展示了对我有用的 SliverAppBar 示例。

                  SliverAppBar(
                      bottom: PreferredSize(
                          preferredSize: Size.fromHeight(0),
                          child: Container(
                              decoration: const BoxDecoration(
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.white,
                                    blurRadius: 0.0,
                                    spreadRadius: 1.0,
                                    offset: Offset(0, 0),
                                  ),
                                ],
                              ),
                              child: ...))