删除 SliverAppBar 底部边框 - Flutter答案

【问题标题】：Remove SliverAppBar bottom border - Flutter删除 SliverAppBar 底部边框 - Flutter
【发布时间】：2019-07-15 05:42:15
【问题描述】：

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

这是我的 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
             )
        ]
    }
)

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

只需将elevation 属性设置为0。

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

【讨论】：

嘿，我发现问题仅在模拟器中显示，并且在设备中正常工作。谢谢你的帮助。

【解决方案2】：

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

将`SliverAppBar` 的`elevation` 设置为`1`

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

结果：

【讨论】：

【解决方案3】：

在我这边，底部边框仍然显示。和这个问题有关https://github.com/flutter/flutter/issues/16262

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

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

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()
                ],
              ),
            ),
          ],
        ));
  }

【讨论】：

【解决方案4】：

如果你有两条相同颜色的条子，这对颤振来说是一个长期存在且令人讨厌的问题。

目前最好的解决方法是在这里 (https://github.com/flutter/flutter/issues/37578#issuecomment-640302364)，在你的条子周围添加一个阴影框。

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

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

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

【讨论】：

将SliverAppBar 的elevation 设置为1

将`SliverAppBar` 的`elevation` 设置为`1`