flutter - 如何在Flutter中实现与此类似的设计？

Question

我想要设计这样的东西。 为此，我使用了堆栈并按以下方式放置了小部件:

Stack(
        children: [
          Column(
              children: [
                Container(
                  height: 180,
                  width: 130,
                  padding:EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    image: DecorationImage(
                      fit:BoxFit.cover,
                      image: AssetImage("assets/images/bookshelf.jpg")
                    )
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(0),
                  child: Text("by Author Name", style: TextStyle(fontSize: 10, color: Colors.grey),),
                ),
                Padding(
                  padding: EdgeInsets.all(0),
                  child: Text("Book Name"),
                )
              ],
          ),
          Positioned(
            bottom: 30,
            left:0,
            height: 60,
            width: 60,
            child: PriceTag()
          ),
          Positioned(
              top: 0,
              left:85,
              height: 60,
              width: 60,
              child: RatingCard()
          )
        ],
      ),

但是问题是，我将PriceTag小部件放置在bottom:30的定位小部件中。当我将此设计放到具有一定高度的“水平列表 View ”中时，底部是从该列表 View 的高度测量的。如何实现与此图像 View 相关的属性“底部”，而不是“水平列表” View 的高度。因为如果我再放高一些，那个圆形标签将没有照片。

Answer 1

您的元素层次结构似乎有问题:

- Stack 
  - Column
    - Container(bookshelf.jpg)
    - Padding - Text("by Author Name")
    - Padding - Text("Book Name"),
 - Positioned - PriceTag()
 - Positioned - RatingCard()

价格和评分不在书架上。我认为那不是你想要的。
尝试这样的事情:

- Column
  - Container
    - Column
      - RatingCard()
      - PriceTag()
  - Padding - Text("by Author Name")
  - Padding - Text("Book Name")

您也不再需要堆栈或定位。 PriceTag和RatingCard可以与 Align(alignment: Alignment.topRight, child: RatingCard())对齐