如何在 Flutter 中实现类似这样的设计？答案

【问题标题】：How to achieve a design similar to this in Flutter?如何在 Flutter 中实现类似这样的设计？
【发布时间】：2020-09-02 13:03:31
【问题描述】：

我想要设计这样的东西。为此，我使用了堆栈和定位小部件，如下所示：

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 的定位小部件中。当我将此设计放在具有特定高度的水平列表视图中时，底部是从该列表视图的高度测量的。如何实现与此图像视图相关的属性“底部”，而不是水平列表视图的高度。因为如果我把高度放得更多，那个圆形标签就会不在照片中。

【问题讨论】：

你试过Align吗？

标签： flutter dart

【解决方案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())对齐

【讨论】：