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

Question

像那样

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

标签： flutteruitableviewuser-interfaceflutter-layout

Answer 1

所以你有两个选择，第一个，这是我写下一个例子的那个，是你SliverAppBar包含Stack一个有图像和电影标题容器的，它与主体颜色相同，所以它显示为一个容器（（用绿色边框来说明））。这将使应用栏消失，就像我猜想的那样。
第二种选择是您不使用应用栏，并且页面将仅包含一个很大的主体，Container您将对上面的堆栈执行相同的操作。

我希望这就是你要找的。

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