Размещение виджета в конце виджета строки

Я просто застрял здесь. Все перепробовал, но ничего не работает. Все, что я хочу, это разместить Icon справа от моего Row.

Примечание. Я попытался установить весь виджет внутри строки в виджет Align и обработать положение этого виджета Align, но ничего не сработало. Код ниже получает это:

Эта стрелка должна перейти в конец виджета Row. Вот мой код:

Row(
    mainAxisAlignment: MainAxisAlignment.start, //change here don't //worked
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Container(
        margin:
            EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0, right: 12.0),
        width: 15.0,
        height: 15.0,
        decoration: BoxDecoration(
            color: task.color, borderRadius: BorderRadius.circular(40.0)),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            task.title,
            style: TextStyle(
                color: Colors.black,
                fontSize: 19.0,
                fontWeight: FontWeight.bold),
          ),
          Text(
            'Duration: ${task.date}',
            style: TextStyle(color: Colors.black, fontSize: 14.0),
          )
        ],
      ),
      Icon(Icons.navigate_next, color: Colors.black) // This Icon
    ],
  ),

flutter dart flutter-layout

Pedro Massango 17.09.2018 источник

Ответы (6)

arrow_upward
48
arrow_downward

Одно из решений - использовать виджет Spacer, чтобы заполнить пространство.

https://docs.flutter.io/flutter/widgets/Spacer-class.html

    Row(
            mainAxisAlignment: MainAxisAlignment.start, //change here don't //worked
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                margin:
                    EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0, right: 12.0),
                width: 15.0,
                height: 15.0,
                decoration: BoxDecoration(
                    color: Colors.red, borderRadius: BorderRadius.circular(40.0)),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "task.title",
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 19.0,
                        fontWeight: FontWeight.bold),
                  ),
                  Text(
                    'Duration: ${somenum}',
                    style: TextStyle(color: Colors.black, fontSize: 14.0),
                  )
                ],
              ),
              new Spacer(), // I just added one line
              Icon(Icons.navigate_next, color: Colors.black) // This Icon
            ],
          ),

Вот что произойдет, если вы добавите его в начало строки.

user1462442 17.09.2018

comment

Если кто-то использует расширенные или гибкие виджеты для изменения размера своих виджетов, Spacer не очень полезен, потому что по умолчанию он имеет значение flex: 1. - No N; 22.01.2020

comment

@NoN Вы можете изменить размер гибкого элемента Spacer Widget. Spacer Widget бесполезен только с неограниченными размерами. Есть и другие методы, такие как Wrap или Row space между - user1462442; 01.05.2020

arrow_upward
7
arrow_downward

вы можете добавить Spacer(), над виджетом, который хотите поместить в конец.

Naimish Vinchhi 03.06.2020

arrow_upward
3
arrow_downward

Почему вы не используете виджет ListTile? Или оборачивать Column Expanded? Я думаю, это сработает.

Daibaku 17.09.2018

comment

ListTile лучше справляется с этой задачей. Также вы можете использовать виджет Spacer (). дополнительная информация: ссылка - Magician; 04.04.2020

comment

ListTile отлично поработал! Это принятый ответ в моем сердце. - LuisDev99; 21.04.2020

comment

Вы можете использовать его, однако имейте в виду, что он слишком ограничен для некоторых случаев использования. - Pedro Massango; 14.07.2021

arrow_upward
0
arrow_downward

используйте виджет ListTile. Это будет работать лучше здесь, а также меньше кода.

CHANDUKA SAMARASINGHE. 08.06.2020

arrow_upward
0
arrow_downward

Если вы хотите заполнить пространство между виджетами, используйте Expanded(). Виджет, который расширяет дочерний элемент Row, Column или Flex, так что дочерний элемент заполняет доступное пространство.

Использование виджета Expanded заставляет дочерний элемент Row, Column или Flex расширяться, чтобы заполнить доступное пространство вдоль главной оси (например, по горизонтали для Row или по вертикали для Column). Если несколько дочерних элементов расширяются, доступное пространство делится между ними в соответствии с коэффициентом flex.

В row, если мы хотим разместить пространство между двумя виджетами так, чтобы оно занимало все оставшееся пространство.

Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Container(
          margin:
          EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0, right: 12.0),
          width: 15.0,
          height: 15.0,
          decoration: BoxDecoration(
              color: Colors.red, borderRadius: BorderRadius.circular(40.0)),
        ),
        Expanded(
          flex: 2,
          child: Container(
            padding: EdgeInsets.only(left: 8, right: 3),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'task.title',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: CustomTextStyle.textSubtitle2BlackShades(
                      context),
                ),
                Text(
                  'Duration 36',
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: CustomTextStyle.textSubtitle1blueShades(
                      context),
                )
              ],
            ),
          ),
        ),
        Icon(Icons.navigate_next, color: Colors.black)
      ],
    )

Paresh Mangukiya 03.11.2020

arrow_upward
0
arrow_downward

Решения:

Используйте 1_:

Row(
  children: <Widget>[
    Text('1'),
    Spacer(), // <-- Use 'Spacer'
    Text('2'),
  ],
)

Используйте mainAxisAlignment:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // <-- spaceBetween
  children: <Widget>[
    Text('1'),
    Text('2'),
  ],
)

Вывод (одинаковый для обоих):

CopsOnRoad 13.07.2021

Размещение виджета в конце виджета строки

Ответы (6)

Похожие вопросы