如何在颤振中制作具有价格的图像框

Question

我打算用价格，图片，折扣视图制作一个电子商务应用程序，但我不知道这个观点。我尝试了千种方法，但他们什么也没给我。

以下是预览：

Answer 1

您的问题太广泛了，但它会尝试为您提供必要的资源来实现您正在寻找的布局。

这一切都归结为布局小部件（你可以在这里找到目录：https://flutter.dev/docs/development/ui/widgets/layout）。有单个子和多个子布局小部件。为了创建折扣标签效果，您将需要一个Stack小部件，顾名思义，它将其子节点堆叠在一起，然后您可以将Image小部件和折扣小部件作为子节点，有效地放置折扣标签在图像上方。每张卡的布局可能类似于：

Container(
  child: Column(
    children: <Widget>[
      Stack(
        children: <Widget>[
          Image(),
          DiscountWidget(),
        ],
      ),
      Text('Shirt'),
      Row(
        Text('Rp.50000'),
        Text('345'),
      ),
      Row(
        RatingWidget(),
        Text('Ready stock'),
      ),
    ],
  ),
);

当然，您需要实现DiscountWidget和RatingWidget，但该代码提供了如何创建您正在寻找的布局的高级概述。