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

这给了我以下 UI

如您所见，代码没有提供我期望的用户界面。我得到的用户界面没有正确对齐。 等级、规范 和所有内容都对齐到底部，而不是顶部。我注意到当图像变大时，这些内容会进一步下降。

我该如何解决这个问题？

Answer 1

在 Rows 之间使用 SizeBox 您可以根据需要增加此大小

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

Note: Here your Parent widget is Column that's why we are using SizeBox(height:5) if we are using Row then we will using like this SizeBox(width:5)