将小部件定位在行小部件的末尾

Question

我只是被困在这里。我已经尝试了一切，但对我没有任何用处。我只想将 Icon 放在 Row.

的右侧

注意：我已尝试将行内的所有小部件设置为 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
    ],
  ),

Answer 1

你为什么不使用 ListTile 小部件？或者用 Expanded 包装 Column？我认为这会奏效。

Answer 2

一种解决方案是使用 Spacer 小部件来填充 space

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

如果将它添加到行的开头，会发生以下情况。

Answer 3

你可以在你想放在最后的小部件上面添加Spacer(),。

Answer 4

如果您想在小部件之间填充 space，请使用 Expanded()。扩展 Row、Column 或 Flex 的 child 的小部件，以便 child 填充可用的 space.

使用 Expanded 小部件使 Row、Column 或 Flex 的 child 扩展以填充可用的 space沿主轴（例如，水平 Row 或垂直 Column）。如果展开多个children，可用的space按照flex系数进行分配。

在row中，如果我们想把space放在两个小部件之间，这样它就占据了所有剩余的space。

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

Answer 5

解决方案：

使用Spacer:

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

使用mainAxisAlignment:

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

输出（两者相同）：

将小部件定位在行小部件的末尾

Positioning a Widget in the end of the Row widget

dart

flutter

flutter-layout