Flutter：在彼此相鄰的兩列中顯示內容

Question

我需要如下輸出

下面是我的代碼

Widget _buildShoppingItem() {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Text("ABCD"),
            )
          ],
        ),
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  child: FadeInImage.assetNetwork(
                    alignment: Alignment.topCenter,
                    placeholder: "https://picsum.photos/100",
                    image: "https://picsum.photos/100",
                    fit: BoxFit.none,
                  ),
                ),
              ),
              Expanded(
                flex: 4,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Container(child: Text("Grade:")),
                          Container(child: Text("Sashimi")),
                        ],
                      ),

                      Row(
                        children: <Widget>[
                          Container(child: Text("Spec:")),
                          Container(child: Text("Skinless Boneless, Full Loins")),
                        ],
                      ),

                      Row(
                        children: <Widget>[
                          Container(child: Text("Size:")),
                          Container(child: Text("2-4 kG")),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Spacer(flex: 4,)
                        ],
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        )
      ],
    );
  }

這給了我以下用戶界面

正如你所看到的，代碼沒有給我我期望的用戶界面。 我得到的用戶界面沒有正確對齊。 等級、規格和所有都與底部對齊，而不是頂部。 我注意到當圖像變大時，這些內容會進一步下降。

我該如何解決這個問題？

Answer 1

使用SizeBox之間的Rows可以增加此大小按您的要求

Widget _buildShoppingItem() {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Text("ABCD"),
            )
          ],
        ),
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  child: FadeInImage.assetNetwork(
                    alignment: Alignment.topCenter,
                    placeholder: "https://picsum.photos/100",
                    image: "https://picsum.photos/100",
                    fit: BoxFit.none,
                  ),
                ),
              ),
              Expanded(
                flex: 4,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Container(child: Text("Grade:")),
                          Container(child: Text("Sashimi")),
                        ],
                      ),
                            SizedBox(height: 5.0),

                      Row(
                        children: <Widget>[
                          Container(child: Text("Spec:")),
                          Container(child: Text("Skinless Boneless, Full Loins")),
                        ],
                      ),
                            SizedBox(height: 5.0),

                      Row(
                        children: <Widget>[
                          Container(child: Text("Size:")),
                          Container(child: Text("2-4 kG")),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Spacer(flex: 4,)
                        ],
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        )
      ],
    );
  }

注意：這里你的父小部件是 Column 這就是為什么我們使用SizeBox(height:5)如果我們使用 Row 那么我們將像這樣使用SizeBox(width:5)

Answer 2

如果是頂部而不是底部，這個怎么樣？

Widget _buildShoppingItem() {
  return Column(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start, // add this line
        children: <Widget>[
          Container(
            child: Text("ABCD"),
          )
        ],
        ...