如何在 Flutter 中制作带价格的图片框

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，但该代码提供了有关如何创建所需布局的高级概述。

Answer 2

线路通过

          style: TextStyle(decoration: TextDecoration.lineThrough),

如何在 Flutter 中制作带价格的图片框

How to make Images Box with Price in Flutter

image

e-commerce

box

flutter

flutter-layout