我如何将容器向右移动

时间:2019-06-06 08:05:21

标签: flutter dart

如何将容器向右移动。 我有3个图标,我需要将最后一个图标移到右侧,所以其他2个图标在左侧

我为扑扑而编写应用程序 example a post from my app

Row(
                                      children: <Widget>[
                                        Container(
                                          margin: EdgeInsets.only(right: 10),
                                          child: Row(
                                            children: <Widget>[
                                              Icon(Icons.insert_emoticon),
                                              Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node.edgeLikedBy.count.toString()),
                                            ],
                                          ),
                                        ),
                                        Icon(Icons.comment),
                                        Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node.edgeMediaToComment.count.toString()),
                                        Container(
                                          margin: EdgeInsets.only(left: 230),
                                          child: Icon(Icons.thumb_up),
                                        )
                                      ],
                                    ),

2 个答案:

答案 0 :(得分:1)

只需使用-Spacer()小部件来填充两者之间的空间。

Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: 10),
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.insert_emoticon),
                      Text('10'),
                      Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
                          .node.edgeLikedBy.count
                          .toString()),
                    ],
                  ),
                ),
                Icon(Icons.comment),
                Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node
                    .edgeMediaToComment.count
                    .toString()),
                Spacer(),  // Add this
                Container(
                  margin: EdgeInsets.only(left: 230),
                  child: Icon(Icons.thumb_up),
                )
              ],
            ),

答案 1 :(得分:0)

您可以按照上面的答案进行操作,也可以添加IconComment并将其添加到同一行,并将主轴对齐方式设置为MainAxisAlignment.spaceBetween 试试下面的代码

  Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(right: 10),
            child: Row(
              children: <Widget>[
                Icon(Icons.insert_emoticon),
                Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
                    .node.edgeLikedBy.count
                    .toString()),
                Icon(Icons.comment),
                Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
                    .node.edgeMediaToComment.count
                    .toString()),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 230),
            child: Icon(Icons.thumb_up),
          )
        ],
      ),

您可以修改该边距权限以使其完美匹配