将Widget放在一行中,直到Row的末尾

问题描述 投票:1回答:2

我只是被困在这里。我已经尝试了一切,但对我来说没什么用。我想要的就是将Icon放在我的行右侧。

注意:我已经尝试将行中的所有窗口小部件设置为Align Widget并处理该Align窗口小部件的位置,但没有任何效果。下面的代码检索:

enter image description here

此箭头应该转到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
    ],
  ),
dart flutter flutter-layout
2个回答
1
投票

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

Does this work?

如果将其添加到行的开头,会发生以下情况。 enter image description here


0
投票

你为什么不使用“ListTile”小部件?或者使用“Expanded”包装Column?我认为那会有效。

© www.soinside.com 2019 - 2024. All rights reserved.