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

注意：这里您的父小部件是列，这就是我们使用行的原因，SizeBox(height:5)如果我们使用行，那么我们将像这样使用SizeBox(width:5)