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

Question

我正在尝试在提醒对话框中显示每张图片下方该图片的文本，例如评分。我尝试使用堆栈小部件，这是结果 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())
                ])));
            }));   
  }

}

Answer 1

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

Answer 2

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

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

Answer 3

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

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

如果你想使用 STACK

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

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

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

How to display text below the image?

dart

flutter

flutter-layout

flutter-alertdialog