我怎样才能像这张图片一样将小部件放在 sliver 应用栏上方

Question

like that

关于这个问题的任何想法 我试图把堆栈但没有工作 我本可以将所有内容都放在一个 sliver 列表中，然后使用堆栈和容器来完成 但是当我滚动应用栏时我需要消失

Answer 1

所以你有两个选择，第一个也是我写下一个例子的那个，是你的SliverAppBar 包含一个Stack，它同时具有图像和电影标题容器，它们将是相同的颜色作为主体，因此它显示为一个容器（（以绿色为边界））。这将使应用栏消失，就像我想的那样。
第二种选择是您不使用应用栏，页面将仅包含一个较大的 Container 正文，您将对上面的堆栈执行相同操作。

我希望这就是你要找的。​​p>

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            primary: true,
            pinned: false,
            backgroundColor: Colors.white,
            expandedHeight: MediaQuery.of(context).size.height * 0.45,
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              background: Container(
                decoration: BoxDecoration(border: Border.all(color: Colors.green)),
                child: Stack(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.black,
                        image: DecorationImage(
                          fit: BoxFit.cover,
                          colorFilter: new ColorFilter.mode(Colors.grey.withOpacity(0.5), BlendMode.dstATop),
                          alignment: Alignment.topCenter,
                          image: NetworkImage(
                              "https://m.media-amazon.com/images/M/MV5BNDg3MmI1ZDYtMDZjYi00ZWRlLTk4NzEtZjY4Y2U0NjE5YmRiXkEyXkFqcGdeQXVyNzAxMjE1NDg@._V1_UY1200_CR92,0,630,1200_AL_.jpg"),
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        height: 100,
                        width: MediaQuery.of(context).size.width,
                        padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(30),
                            topRight: Radius.circular(30),
                          ),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              "Gangs of New York",
                              style: TextStyle(fontSize: 17, fontWeight: FontWeight.w400),
                            ),
                            Row(
                              children: [
                                Container(
                                  decoration: ShapeDecoration(
                                    shape: StadiumBorder(),
                                    color: Colors.grey[400],
                                  ),
                                  child: Padding(
                                    padding: const EdgeInsets.all(6),
                                    child: Text("Action"),
                                  ),
                                ),
                                SizedBox(width: 5),
                                Container(
                                  decoration: ShapeDecoration(
                                    shape: StadiumBorder(),
                                    color: Colors.grey[400],
                                  ),
                                  child: Padding(
                                    padding: const EdgeInsets.all(6),
                                    child: Text("etc"),
                                  ),
                                )
                              ],
                            )
                          ],
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.center,
                      child: Icon(Icons.play_circle_outline, color: Colors.white, size: 50),
                    )
                  ],
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              height: 700,
              decoration: BoxDecoration(
                color: Colors.white,
              ),
              child: Center(
                child: Text("body"),
              ),
            ),
          ),
        ],
      ),
    );
   }