Выравнивание виджета в одном родительском элементе относительно виджета в другом родительском элементе — Флаттер

#flutter #alignment

#флаттер #выравнивание

Вопрос:

В моем проекте flutter структура кода выглядит следующим образом:

 Column(
      children: [
        Row(
          children: statusViews,
        ),
        Row(
          children: textViews,
        )
      ],
    );
  

Первая строка содержит 4 изображения с некоторыми индикаторами выполнения между ними. И вторая строка содержит 4 текста для соответствующих изображений состояния в первой строке. Я хочу выровнять текст по центру из второй строки относительно изображения в первой строке.

введите описание изображения здесь

Итак, мой основной вопрос: как мы можем выровнять виджет в одном родительском элементе относительно виджета в другом родительском элементе?

Ответ №1:

вы пробовали переносить каждый элемент строки в виджет столбца и размещать изображение и соответствующий текст в столбце? это должно быть прямо вперед, чтобы центрировать все оттуда.

Обновление: глядя на ваш фрагмент кода, дочерние элементы строки представляют собой списки виджетов. в разделе кода, где вы создаете список виджетов, заключите каждый элемент в столбец и включите соответствующий текст и выравнивание.

Комментарии:

1. Да, я пробовал это, но пробел между значком и прогрессом был слишком большим.

Ответ №2:

Для индикатора выполнения удалите контейнер текстового виджета.

 body: Container(
    child: Column(children: [
      Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(children: [
              Container(
                  height: 100,
                  width: 100,
                  child: Image(
                      image: AssetImage("assets/images/ProfilePic.jpg"),
                      fit: BoxFit.contain)),
              Container(child: Text("Test"))
            ]),
          ]),
    ]),
  ),
  

Вывод