Question

我试图将文本放置在轮播滑块中的图像下方，但是现在文本显示在图像上，而不是下方。

它看起来像这样：

但是我希望它看起来像这样：

这是我的代码：

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(),
    );

颤动轮播滑块在图像下放置文本

1 个答案: