flutter 轮播 slider 将文本放置在图像下

Question

我正在尝试将文本放在轮播 slider 中的图像下方，但现在文本出现在图像上，而不是下方。

它看起来像这样:


但我希望它看起来像这样:


这是我的代码:

final CarouselSlider autoPlayDemo = CarouselSlider(
  viewportFraction: 0.9,
  aspectRatio: 2.0,
  autoPlay: false,
  enlargeCenterPage: true,
  items: imgList.map(
    (child) {
      return Container(
        margin: EdgeInsets.all(10.0),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          child: Stack(children: <Widget>[
          Image.asset(
            child,
            fit: BoxFit.cover,
            width: 1000.0,
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
            child: Text(
            'Text',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ))
          ])),
      );
    },
  ).toList(),
);

我该怎么做才能将文本放置在图像上的图像下？

Stack(children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      height: 600,
      decoration: BoxDecoration(
        color: Color.fromRGBO(217,225,216,1),
      ),
      padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
          child: Text(
            'News',
            style: TextStyle(
              color: Colors.black,
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
    ),
    Padding(
            padding: EdgeInsets.symmetric(vertical: 50.0),
            child: Column(children: [
              autoPlayDemo,
            ])),
    ]),

Answer 1

用 Stack 包裹它们小部件是错误的。 Stack是一个显示其子级的小部件 相互重叠 .相反，将它们包装在 Column 中以水平方式显示其子级的小部件 在彼此之下 .

还用 ClipRRect 包装图像实现你的目标。

final CarouselSlider autoPlayDemo = CarouselSlider(
      viewportFraction: 0.9,
      aspectRatio: 2.0,
      autoPlay: false,
      enlargeCenterPage: true,
      items: imgList.map(
            (child) {
          return Container(
            margin: EdgeInsets.all(10.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  child: Image.asset(
                    child,
                    fit: BoxFit.cover,
                    width: 1000.0,
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                    child: Text(
                      'Text',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ).toList(),
    );