如何在图片下方显示文字？答案

【问题标题】：How to display text below the image?如何在图片下方显示文字？
【发布时间】：2020-10-14 13:42:18
【问题描述】：

我正在尝试在警报对话框中将每张图片的文本显示到该图片中，例如评分。我尝试使用堆栈小部件，这是the result 的结果。文字在图片前面，不显示在图片下方，但我只是希望它显示在图片下方。我怎样才能正确地做到这一点？

@override
  Widget build(BuildContext context) {
    return Container(
        height: 60,
        width: MediaQuery.of(context).size.width*0.75,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: pic.length,
            itemBuilder: (context, index) {
              return  Container(
                margin: const EdgeInsets.only(right: 10),
                 child: InkWell(
                        onTap: () {
                        },
                         child: Stack(
                children: <Widget> [
                      Image.asset('assets/images/'+pic[index].toString()+'.png', height: 70, width: 70,),
                    Text(pic[index].toString())
                ])));
            }));   
  }

}

【问题讨论】：

标签： flutter dart flutter-layout flutter-alertdialog

【解决方案1】：

像这样颠倒小部件的顺序：首先是带有子容器的InkWell 小部件，然后向该容器传递一个带有图标的列小部件，然后是文本。我在这个例子中使用了 GestureDetector..

GestureDetector(
          onTap: #Do Something
          child: Container(
            child: Column(
              children: <Widget>[
                Icon('Your Icon Here'),
                Text('Your Text Here')
              ],
            ),
          ),
        ),

【讨论】：

它有并且错误“引发了另一个异常：A RenderFlex 在底部溢出了 9.0 像素。”添加文本时。我该如何解决这个问题？
这个错误是由于高度紧张引起的 - 尝试把它放在一个扩展的小部件中查看你的代码 - 增加你的父容器的大小（从 60 到 70-80）将解决它.如果我的解决方案对您有帮助 - 请竖起大拇指并接受答案，以便关闭线程:)

【解决方案2】：

您可以在堆栈中定位元素 - positioned

【讨论】：

【解决方案3】：

如果您不想使用堆栈，请使用此代码

Container(
      constraints: new BoxConstraints.expand(
        height: 200.0,
      ),
      alignment: Alignment.bottomLeft,
      padding: new EdgeInsets.only(left: 16.0, bottom: 8.0),
      decoration: new BoxDecoration(
        image: new DecorationImage(
          image: new AssetImage('assets/image.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      child: new Text('Title',
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 20.0,
        )
      ),
    );

如果你想使用堆栈

Container(
        constraints: new BoxConstraints.expand(
          height: 200.0,
        ),
        padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new AssetImage('assets/image.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: new Stack(
          children: <Widget>[
            new Positioned(
              left: 0.0,
              bottom: 0.0,
              child: new Text('Title',
                  style: new TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                  )
              ),
            ),
            new Positioned(
              right: 0.0,
              bottom: 0.0,
              child: new Icon(Icons.star),
            ),
          ],
        )
    );

这个链接如果你想看更多https://cogitas.net/overlay-text-icon-image-flutter/

【讨论】：

我使用你的代码，它也可以，但在 alertdalog 中不起作用。可能是我需要修复一些东西。非常感谢。