Flutter_Swiper 文本覆盖图像答案

【问题标题】：Flutter_Swiper text over imageFlutter_Swiper 文本覆盖图像
【发布时间】：2020-08-24 08:52:37
【问题描述】：

我已经开始使用 Flutter Swiper (https://pub.dev/packages/flutter_swiper)，到目前为止它非常强大！

我唯一做不到的就是在图像上叠加文字。这是我在图片下方显示文本的代码：

            new Swiper(
              outer: false,
              itemBuilder: (BuildContext context, int index) {
                return new Column(
                  children: <Widget>[
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        new Container(
                          child: new Container(
                            child: new Image.asset(dateIdeas[index]),
                          ),
                        ),
                        new Text(
                          "test",
                          textAlign: TextAlign.start,
                        ),
                      ],
                    ),
                  ],
                );
              },
              itemCount: dateIdeas.length,
              layout: SwiperLayout.DEFAULT,
              itemHeight: 800,
              itemWidth: 400,
            ),

这会在图像下方显示“测试”一词，并且文本会随着图像的滑动而移动。但是我无法在图像上叠加文字。我尝试添加填充并增加“底部”值以将文本向上移动，但它不会移动。令人讨厌的是，当被问到时，它确实会左右移动文本。

有人知道怎么做吗？

【问题讨论】：

文本“测试”是静态的吗？滑动时不改变？
不，在最终版本中，文本不会是静态的。测试只是一个占位符。文本将与显示的图像相关。
在下面查看我的答案
你试过了吗？

标签： flutter flutter-dependencies

【解决方案1】：

使用Stack

    Swiper(
          outer: false,
          itemBuilder: (BuildContext context, int index) {
            return new Column(
              children: <Widget>[
                Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Stack(
                      children: <Widget>[
                        new Container(
                          child: new Image.asset(dateIdeas[index]),
                        ),
                        new Text(
                          "test",
                          textAlign: TextAlign.start,
                        ),
                      ],
                    )
                  ],
                ),
              ],
            );
          },
          // itemCount: dateIdeas.length,
          // layout: SwiperLayout.DEFAULT,
          itemHeight: 800,
          itemWidth: 400,
        );

【讨论】：