0

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

@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())
                ])));
            }));   
  }

}
4

3 回答 3

0

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

GestureDetector(
          onTap: #Do Something
          child: Container(
            child: Column(
              children: <Widget>[
                Icon('Your Icon Here'),
                Text('Your Text Here')
              ],
            ),
          ),
        ),
于 2020-06-24T10:21:21.717 回答
0

您可以在堆栈内定位元素 -定位

于 2020-06-24T10:15:14.430 回答
0

如果您不想使用此代码，请使用 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),
            ),
          ],
        )
    );

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

于 2020-06-24T10:50:21.520 回答