Флаттер: отображение содержимого в двух столбцах рядом друг с другом

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

Это дает мне следующий пользовательский интерфейс

Как видите, код не дает мне интерфейса МОИ ОЖИДАНИЯ. Пользовательский интерфейс, который я получаю, не выровнен должным образом. Grade, Specs и все выровнены по низу, а не по верху. Я заметил, что когда изображение становится больше, этот контент продолжает уменьшаться.

Как я могу решить эту проблему?

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)

Answer 2

Если сверху, а не снизу, как на счет этого?

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