Flutter - 如何對齊文本和圖像小部件？

Question

我有一張Card ，其中包含多個帶有Image Text 。 現在圖像位於頂部中心，我需要將其與卡片內的右側對齊。

我需要卡片左側的所有文本和右側的圖像。

所以，基本上所有的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 。 我添加了它只是讓它看起來不錯。

如果您有任何疑問，請告訴我