user-interface - 如何防止AppBar覆盖背景？

Question

我正在尝试使用 PreferredSize 和 Card 小部件实现自定义 AppBar。这是结果:

但是，当我向下滚动一点时，AppBar 布局覆盖了背景(这是脚手架的 body 部分)，如下所示:

见第二张截图:自定义 AppBar 覆盖了它下面的所有内容。有办法避免这种情况吗？

顺便说一句，这些示例图像来自附加到 Scaffold 的 body 的 StreamBuilder 小部件。

代码如下:

appBar: PreferredSize(
        preferredSize: Size.fromHeight(50.0),
        child: SizedBox(
          height: 100.0,
          child: Card(
            elevation: 10.0,
            color: Colors.white.withOpacity(0.8),
            clipBehavior: Clip.antiAlias,
            margin: EdgeInsets.only(top: 30.0, left: 10.0, right: 10.0),
            child: Stack(
              children: <Widget>[
                GestureDetector(
                  onTap: () {
                    _key.currentState.openDrawer();
                  },
                  child: Padding(
                    padding: const EdgeInsets.only(top: 9.0, left: 10.0),
                    child: Icon(FontAwesomeIcons.bars, color: Colors.grey[800]),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 13.0, left: 50.0),
                  child: TextField(
                    decoration: InputDecoration.collapsed(
                      hintText: 'Search... ',
                      hintStyle: TextStyle(fontFamily: 'Monospace')
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    _key.currentState.openEndDrawer();
                  },
                  child: Padding(
                    padding: const EdgeInsets.only(top: 9.0, left: 305.0),
                    child: Icon(FontAwesomeIcons.slidersH, color: Colors.grey[800]),
                  ),
                )
              ],
            ),
          ),
        )
      ),

感谢您的回答!

Answer 1

与其将 PreferredSize appbar 直接设置为 Scaffold 的 appBar 属性，不如将其Stack 正文。此代码应该适用于您想要的结果。

Scaffold(
  body: Stack(
    children: [
      Container(), // this is where your main body goes
      Positioned(
        top: 30,
        left: 10,
        right: 10,
        child: PreferredSize(
          preferredSize: Size.fromHeight(25.0),
          child: Container(
            color: Colors.white.withOpacity(0.0),
            height: 50.0,
            child: Card(
              elevation: 10.0,
              color: Colors.white.withOpacity(1),
              clipBehavior: Clip.antiAlias,
              child: Stack(
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      _key.currentState.openDrawer();
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(top: 9.0, left: 10.0),
                      child: Icon(Icons.menu, color: Colors.grey[800]),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 13.0, left: 50.0),
                    child: TextField(
                      decoration: InputDecoration.collapsed(
                        hintText: 'Search... ',
                        hintStyle: TextStyle(fontFamily: 'Monospace')
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {                            
                      _key.currentState.openEndDrawer();
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(top: 9.0, left: 305.0),
                      child: Icon(Icons.star, color: Colors.grey[800]),
                    ),
                  )
                ],
              ),
            ),
          )
        ),
      ),
    ]
  ),
);

sample 出来了: