Question

我试图将食物的名称和价格的左侧对齐，将图标的右侧对齐。我似乎无法通过Row，Stack或Container和Column小部件的组合来获得它。

代码如下：

    return Container(
      decoration: BoxDecoration(
        color: Colors.blue
      ),
      child: Column(
        children: <Widget>[
          Container(
            width: 175,
            height: 175,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(90),
                image: DecorationImage(fit: BoxFit.cover, image: img)),
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(name,
                      style: GoogleFonts.ubuntu(
                        fontSize: 18,
                        fontWeight: FontWeight.w500,
                      )),
                  SizedBox(height: 4),
                  Row(
                    children: <Widget>[
                      Text("\$" + price.toString(),
                          style: GoogleFonts.ubuntu(
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                          )),
                      Text("/kg",
                          style: GoogleFonts.ubuntu(
                            fontSize: 14,
                            fontWeight: FontWeight.w400,
                          ))
                    ],
                  )
                ],
              ),
              Icon(Icons.add_circle_outline, size: 32)
            ],
          ),
        ],
      ),
    );
  }

这是现在的样子：https://cdn.discordapp.com/attachments/626321327791538188/727585975349280889/Capture10.PNG

Answer 1

您可以使用Expanded，Flexible和Spacer强制Column和Row中的小部件占用尽可能多的可用空间。（这只是一个空的展开）小部件。有多种方法可以满足您的需要，每种方法都有自己的优势，但都应能满足您的需要。

最简单的方法可能是在Spacer和包含Icon的{{1}}之间添加Column：

Text

另一种方法是将包含Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(name, style: GoogleFonts.ubuntu( fontSize: 18, fontWeight: FontWeight.w500, )), SizedBox(height: 4), Row( children: <Widget>[ Text("\$" + price.toString(), style: GoogleFonts.ubuntu( fontSize: 16, fontWeight: FontWeight.w600, )), Text("/kg", style: GoogleFonts.ubuntu( fontSize: 14, fontWeight: FontWeight.w400, )) ], ) ], ), Spacer(), Icon(Icons.add_circle_outline, size: 32) ], ),的{{1}}或Column包裹在Text中，尽管我建议将Icon包装成{{ 1}}多余的空间。

Expanded

如何对齐左侧的文本和右侧的图标？

1 个答案: