圆体NestedScrollView的NestedScrollView图像

Question

我使用NestedScrollView使可滚动的AppBar类似于图片。问题是，AppBar的背景图片不足以覆盖空白(图片中描述的箭头)。有人能帮我吗？谢谢。

NestedScrollView(
 headerSliverBuilder: (context, innerBoxIsScrolled) {
  return [
    SliverAppBar(
      title: Text(
        "hehe",
        style: TextStyle(color: Colors.white),
      ),
      floating: true,
      expandedHeight: 100,
      forceElevated: innerBoxIsScrolled,
      flexibleSpace: Stack(
        children: <Widget>[
          Positioned.fill(
              child: Image.network(
            "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
            fit: BoxFit.cover,
          ))
        ],
      ),
    )
  ];
},
// Team Dashboard
body: Container(
  width: DataInstance().screenW,
  padding: const EdgeInsets.symmetric(vertical: kDouble_20),
  decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(kDouble_20),
          topRight: Radius.circular(kDouble_20))),
),
)

Answer 1

用小部件树顶部的背景图像移动Stack以覆盖整个空间，并为Scaffold和SliverAppBar设置backgroundColor transparent。

Stack(
  children: <Widget>[
    Positioned.fill(
        child: Image.network(
      "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
      fit: BoxFit.cover,
    )),
    Scaffold(
        backgroundColor: Colors.transparent,
        body: NestedScrollView(
          headerSliverBuilder: (context, innerBoxIsScrolled) {
            return [
              SliverAppBar(
                backgroundColor: Colors.transparent,
...
              )
            ];
          },
          // Team Dashboard
          body: Container(
...
          ),
        ))
  ],
)