图像顶部带有文字的堆栈列表

问题描述

我拼命尝试使它生效。我可能不知道某些小...或大的东西。

我有一个自己班级的小部件的清单，所以您看到的图片应该是屏幕的1/3，并且是它们的可滚动列表。因此，请想象每个屏幕重复2到3次。

要实现此目的，必须固定哪些尺寸？文本气泡不应该被修复。我希望每张照片的尺寸都完全相同。

  return Container(
      height: MediaQuery.of(context).size.height * 0.4,width: MediaQuery.of(context).size.width,child: Stack(
        overflow: Overflow.visible,children: [
          _LargeImage(
            url:
                'imageurl',),ContainerWithText(),],);

我当然应该将容器放在适当的位置，但是我无法使其工作。我或者收到一个错误消息，或者奇怪地说该对象已溢出。

请帮助，如果有人可以帮助我重新创建图片。

解决方法

我尝试了您所要求的简单实现，但没有收到任何错误。这是：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.4,width: MediaQuery.of(context).size.width,child: Stack(
        overflow: Overflow.visible,children: [
          Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png'),Positioned( bottom: 50,left : 100,child:Container(child: Text('Some Text'))),],),);
  }
}

这是我对您的小部件的实现，我没有任何错误，应该做您想做的事。

class ImageWithTextStack extends StatelessWidget {
  final textSize;
  final textPadding;
  final String text;
  final String imgUrl;

  ImageWithTextStack({
    this.textSize = 14.0,this.textPadding = 16.0,@required this.text,@required this.imgUrl,});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.4,child: Stack(
        children: [
          Container(
            margin: EdgeInsets.only(bottom: textPadding * 2 - textSize / 2),decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(imgUrl),fit: BoxFit.cover,Positioned.fill(
            child: Align(
              alignment: Alignment.bottomCenter,child: Container(
                width: MediaQuery.of(context).size.width,margin: EdgeInsets.symmetric(horizontal: 16),padding: EdgeInsets.all(textPadding),decoration: BoxDecoration(
                  border: Border.all(width: 3),color: Colors.white,child: Text(
                  text,textAlign: TextAlign.center,style: TextStyle(color: Colors.black),);
  }
}

像这样简单地调用ImageWithTextStack：

ImageWithTextStack(text: 'my text',imgUrl: 'image url')

这是我使用DartPad获得的结果：

dart image image image stack