Flutter：在相邻的两列中显示内容答案

【问题标题】：Flutter: Display content in two columns next to each otherFlutter：在相邻的两列中显示内容
【发布时间】：2020-05-08 14:57:47
【问题描述】：

我需要如下输出

下面是我的代码

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

如您所见，代码没有给出我期望的 ui。我得到的 UI 没有正确对齐。 Grade、Specs 和所有都与底部对齐，而不是与顶部对齐。我注意到当图像变大时，这些内容会进一步下降。

我该如何解决这个问题？

【问题讨论】：

在文本小部件之间使用 SizeBox
@AR：不清楚。他们的child 是什么？在文本小部件之间或文本行之间？
抱歉，行之间的文本不在显示我的答案以更清晰

标签： android ios flutter mobile

【解决方案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,)
                        ],
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        )
      ],
    );
  }

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

【讨论】：

【解决方案2】：

如果是顶部而不是底部，这个怎么样？

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

【讨论】：