Question

目前，我有一个产品价格，名称和旧价格的代码，当我编写代码时，它给了我这种非常不满意的样式：

如何编码，使产品名称位于顶部，价格位于中间，而旧价格位于底部呢？例如：

鸡肉午餐盒

旧价格：55,000

新价格：45,000

采用这种格式？我将不胜感激。

这是我对此图片负责的代码：

@override
  Widget build(BuildContext context) {
    return Card(
      child: Hero(
          tag: prod_name,
          child: Material(
            child: InkWell(
              onTap: () {},
              child: GridTile(
                  footer: Container(
                    color: Colors.white70,
                    child: ListTile(
                      leading: Text(
                        prod_name,
                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12.0, ),
                      ),
                      title: Text(
                          "\$$prod_price",
                      style: TextStyle(
                          color: Colors.blue, fontWeight: FontWeight.w800,fontSize: 12.0,),
                      ),
                    subtitle: Text(
                      "\$$prod_old_price",
                      style: TextStyle(
                        color: Colors.blue,
                          fontWeight: FontWeight.w800,
                          fontSize: 12.0,
                          decoration
                              :TextDecoration.lineThrough),
                      ),
                    )
                    ),
                    child: Image.asset(
                    prod_picture,
                    fit: BoxFit.cover,
                  )),
            ),
          )),
    );
  }
}

Answer 1

您可以在字幕中使用列来更轻松地实现愿望ui。

尝试以下代码：

ListTile(
          title: Text("Checken LunchBox"),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Oldprice :55,000"),
              Text("NewPrice :55,000"),
            ],
          ),
        ),

Answer 2

您可以使用Column小部件。这是一个以垂直阵列显示其子代的小部件。

Column(
  children: [
    Text('title'),
    Text('price'),
    Text('prev_price'),
  ],
)

有关更多信息，请参见结帐：https://api.flutter.dev/flutter/widgets/Column-class.html

颤动空格之间的文本

2 个答案: