如何在 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 小部件放置在底部為 30 的定位小部件中。 當我將此設計放在具有特定高度的水平列表視圖中時，底部是從該列表視圖的高度測量的。 如何實現與此圖像視圖相關的屬性“底部”，而不是水平列表視圖的高度。 因為如果我把高度放得更多，那個圓形標簽將不會出現在照片中。

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")

您也不再需要 Stack 或 Positioned。 PriceTag 和 RatingCard 可以通過Align(alignment: Alignment.topRight, child: RatingCard())