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

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

          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),
        ],
      ),
    );

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

让我知道是否有任何疑问