Question

我只是被困在这里。我已经尝试了一切，但对我没有任何帮助。我只想将图标放在“行”的右侧。

注意：我已经尝试将行内的所有窗口小部件设置为 Align 窗口小部件并处理该Align小部件的位置，但是没有任何效果。下面的代码正在检索此：

此箭头应移至“行”小部件的末尾。这是我的代码：

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

您可以在要放在末尾的小部件上方添加Spacer(),。

Answer 2

一种解决方案是使用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
            ],
          ),

如果将其添加到行的开头，将会发生这种情况。

Answer 3

为什么不使用“ ListTile”小部件？还是用“扩展”包装列？我认为那会起作用。

Answer 4

使用ListTile小部件。这样会更好，而且代码更少。

Answer 5

如果要填充小部件之间的空间，请使用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)
      ],
    )

Answer 6

解决方案：

使用Spacer：

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

使用mainAxisAlignment：

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

输出（两者相同）：

将窗口小部件定位在行中到行尾

6 个答案: