首页 > 解决方案 > 飘动的横幅与屏幕重叠

问题描述

我的横幅与我需要在底部或页脚显示广告的松弛小部件重叠,但问题是它与容器重叠,需要知道如何在最后添加但不重叠容器

这是我的代码

body: Stack(
                    children: [
                      GestureDetector(
                        onTap: () {
                          percengtageTrigger();
                          API.voteplusQuestion(snapshot.data[index], 0);
                        },
                        child: Container(
                          height: stackHeight * 0.5,
                          width: stackWidth,
                          color: Color(0xffF9D342),
                          child: Column(
                            children: <Widget>[
                              shouldShow
                                  ? Container(
                                      padding: const EdgeInsets.only(
                                          top: 10, right: 10),
                                      height: stackHeight * 0.1,
                                      color: Color(0xffF9D342),
                                      width: double.infinity,
                                      child: Column(
                                        mainAxisSize: MainAxisSize.max,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.end,
                                        children: <Widget>[
                                          Text(
                                            '${percentage1.toStringAsFixed(0)}%',
                                            style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 23,
                                              fontFamily: 'NewsCycle',
                                            ),
                                          ),
                                        ],
                                      ))
                                  : Container(
                                      height: stackHeight * 0.1,
                                color: Color(0xffF9D342),
                                      width: double.infinity,
                                    ),
                              Container(
                                  color: Color(0xffF9D342),
                                  height: stackHeight * 0.4,
                                  width: double.infinity,
                                  child: Column(
                                    children: <Widget>[
                                      Padding(
                                        padding: const EdgeInsets.only(top: 20),
                                        child: Text(
                                          snapshot.data[index].would,
                                          style: TextStyle(
                                            color: Color(0xff292826),
                                            fontSize: 23,
                                            fontWeight: FontWeight.bold,
                                            fontFamily: 'NewsCycle',
                                          ),
                                        ),
                                      ),
                                    ],
                                  )),
                            ],
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          percengtageTrigger();
                          API.voteplusQuestion(snapshot.data[index], 1);
                        },
                        child: Align(
                          alignment: Alignment.bottomCenter,
                          child: Container(
                            height: stackHeight * 0.5,
                            width: stackWidth,
                            color: Color(0xff292826),
                            child: Column(
                              children: <Widget>[
                                shouldShow
                                    ? Container(
                                        padding: const EdgeInsets.only(
                                            top: 10, right: 10),
                                        height: stackHeight * 0.1,
                                    color: Color(0xff292826),
                                        width: double.infinity,
                                        child: Column(
                                          mainAxisSize: MainAxisSize.max,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.end,
                                          children: <Widget>[
                                            Text(
                                              '${percentage2.toStringAsFixed(0)}%',
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 23,
                                                fontFamily: 'NewsCycle',
                                              ),
                                            ),
                                          ],
                                        ))
                                    : Container(
                                        height: stackHeight * 0.1,
                                        color: Color(0xff292826),
                                        width: double.infinity,
                                      ),
                                Container(
                                    color: Color(0xff292826),
                                    height: stackHeight * 0.4,
                                    width: double.infinity,
                                    child: Column(
                                      children: <Widget>[
                                        Padding(
                                          padding:
                                              const EdgeInsets.only(top: 40),
                                          child: Text(
                                            snapshot.data[index].rather,
                                            style: TextStyle(
                                              color: Color(0xffF9D342),
                                              fontSize: 23,
                                              fontWeight: FontWeight.bold,
                                              fontFamily: 'NewsCycle',
                                            ),
                                          ),
                                        ),
                                      ],
                                    )),
                              ],
                            ),
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment.center,
                        child: Container(
                          width: stackWidth,
                          height: stackHeight * 0.015,
                          color: Colors.white,
                        ),
                      ),
                      Align(
                        alignment: Alignment.center,
                        child: Container(
                            width: stackWidth,
                            height: stackHeight * 0.15,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: Colors.white,
                            ),
                            child: Align(
                              alignment: Alignment.center,
                              child: GestureDetector(
                                onTap: () {
                                  nextQuestion();
                                },
                                child: Text(
                                  "SKIP",
                                  style: TextStyle(
                                      color: Colors.black,
                                      fontFamily: 'FredokaOne',
                                      fontSize: 27),
                                ),
                              ),
                            )),
                      ),
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          child: AdmobBanner(
                            adUnitId: getBannerAdUnitId(),
                            adSize: bannerSize,

                          ),
                        ),
                      ),
                    ],
                  ));

在此处输入图像描述

正如您在图像中看到的那样,它与灰色容器重叠,我需要一个大小相同但在横幅顶部没有与横幅重叠的黄色和灰色容器。

标签: flutter

解决方案


由于您使用的是堆栈,因此堆栈中的子项将重叠。如果不希望它们重叠,您可以根据需要使用其他布局小部件,例如 Column 或 ListView。您可以参考Flutter 文档以获取有关布局小部件的更多信息。


推荐阅读