Flutter - 如何对齐文本和图像小部件？

Question

我有一个Card，其中包含多个Text 和一个Image。现在图像位于顶部中心，我需要将其与卡片内的右侧对齐。

我需要卡片左侧的所有文字和右侧的图像。

所以，基本上所有Text 都应该在左侧，Image 应该在右侧。

这是我现在实现的卡片，

这是我已经实现的代码

  Widget _buildItemsForListView(BuildContext context, int index) {
    return Card(
      child: Column(
        children: <Widget>[
          Image.asset(Constants.FOOD_PLACEHOLDER_IMAGE_ASSET_URL, height: 50,width: 100),
          Text("Spinach soup",
            style: TextStyle(color: Colors.deepPurple, fontSize: 16),
            textAlign: TextAlign.left,),
          Text("SAR",
              style: TextStyle(color: Colors.black, fontSize: 14),
              textAlign: TextAlign.left),
          Text("26",
            style: TextStyle(color: Colors.black, fontSize: 14),
            textAlign: TextAlign.left,),
          Text(
            "Fresh spinach, mushrooms, and hard-boiled egg served with warm bacon vinaigrette",
            style: TextStyle(color: Colors.black, fontSize: 14),
            textAlign: TextAlign.left,),
          Text("15.4" + " Calories",
            style: TextStyle(color: Colors.black, fontSize: 14),
            textAlign: TextAlign.left,)
        ],
      ),
    );
  }

如何实现？

任何建议都会有所帮助。

Answer 1

Card(
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 5,
                child: Column(
                  mainAxisSize:MainAxisSize.min,
                  crossAxisAlignment:CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Spinach soup",
                      style: TextStyle(color: Colors.deepPurple, fontSize: 16),
                      textAlign: TextAlign.left,
                    ),
                    Text("SAR",
                        style: TextStyle(color: Colors.black, fontSize: 14),
                        textAlign: TextAlign.left),
                    Text(
                      "26",
                      style: TextStyle(color: Colors.black, fontSize: 14),
                      textAlign: TextAlign.left,
                    ),
                    Text(
                      "Fresh spinach, mushrooms, and hard-boiled egg served with warm bacon vinaigrette",
                      style: TextStyle(color: Colors.black, fontSize: 14),
                      textAlign: TextAlign.left,
                    ),
                    Text(
                      "15.4" + " Calories",
                      style: TextStyle(color: Colors.black, fontSize: 14),
                      textAlign: TextAlign.left,
                    )
                  ],
                ),
              ),
              Expanded(
                flex: 1,
                child: Image.network(
                    'https://3.img-dpreview.com/files/p/TS1200x900~sample_galleries/1330372094/1693761761.jpg',
                    height: 50,
                    width: 100),
              )
            ],
          ),
        )

Answer 2

尝试在主column 中提供crossAxisAlingment 参数以将文本左对齐，如下所示：

          Column(
            crossAxisAlignment: CrossAxisAlignment.start,

如果您这样做，则包括中心图像，所有内容都将左对齐。

所以您必须将当前的column 包装在row 中并将图像移动到第一个。确保在 column 小部件之后添加图像以使其与右侧对齐。

它看起来像这样：

return Card(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text("Spinach soup",
                style: TextStyle(color: Colors.deepPurple, fontSize: 16),
                textAlign: TextAlign.left,),
              Text("SAR",
                  style: TextStyle(color: Colors.black, fontSize: 14),
                  textAlign: TextAlign.left),
              Text("26",
                style: TextStyle(color: Colors.black, fontSize: 14),
                textAlign: TextAlign.left,),
              Text(
                "Fresh spinach, mushrooms, and hard-boiled egg served with warm bacon vinaigrette",
                style: TextStyle(color: Colors.black, fontSize: 14),
                textAlign: TextAlign.left,),
              Text("15.4" + " Calories",
                style: TextStyle(color: Colors.black, fontSize: 14),
                textAlign: TextAlign.left,)
            ],
          ),
           Image.asset(Constants.FOOD_PLACEHOLDER_IMAGE_ASSET_URL, height: 50,width: 100),
        ],
      ),
    );

注意：您可以从 Row 中删除 crossAxisAlingment。我添加了它只是为了让它看起来不错。

如果您有任何疑问，请告诉我