flutter - Flutter - 行内有 3 个小部件，最后一个右对齐

Question

布局被定义为傻瓜：

Flexible(child: new Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      child: Row(
                          children: <Widget>[
                        Padding(
                            padding: EdgeInsets.only(right: 8.0),
                            child: Text(categoryIcon,
                                style: TextStyle(
                                    color: Colors.lightBlue,
                                    fontFamily: 'Fontawesome',
                                    fontWeight: FontWeight.normal))),
                        Flexible(
                            child: Text(categoryName,
                                maxLines: 3,
                                style: TextStyle(
                                    color: Colors.lightBlue,
                                    fontWeight: FontWeight.normal))),

                        Text("#33088",
                            style: TextStyle(
                                color: Colors.black26,
                                fontWeight: FontWeight.normal))

                      ]),
                      padding: EdgeInsets.only(
                          bottom: 3.0, left: 8.0, top: 10.0, right: 5.0),
                    ),
                    Padding(
                      child: Text(title,
                          maxLines: 3,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontWeight: FontWeight.normal, fontSize: 16)),
                      padding: EdgeInsets.only(
                          bottom: 3.0, left: 8.0, top: 10.0, right: 5.0),
                    ),

                    Padding(
                      child: new Text(address,
                          style: TextStyle(fontStyle: FontStyle.normal)),
                      padding: EdgeInsets.only(
                          bottom: 10.0, left: 8.0, top: 10.0, right: 5.0),
                    ),
                    Visibility(
                      child: Padding(
                        child: new Text("⬤  " + statusName,
                            style: TextStyle(
                                fontStyle: FontStyle.normal,
                                color: HexColor(statusColor))),
                        padding:
                        EdgeInsets.only(bottom: 10.0, left: 8.0, top: 0.0),
                      ),
                      visible: type == ResponseMessageType.MESSAGE_TYPE_EVENT ||
                          type == ResponseMessageType.MESSAGE_TYPE_MY_EVENT,
                    )
                  ],
                ),
              ));

我得到结果：

所以总是当第二行小部件（标签）是文本包装时，标签右对齐，如果不是，标签根本不对齐。如果我尝试：

Row(
                          children: <Widget>[
                        Padding(
                            padding: EdgeInsets.only(right: 8.0),
                            child: Text(categoryIcon,
                                style: TextStyle(
                                    color: Colors.lightBlue,
                                    fontFamily: 'Fontawesome',
                                    fontWeight: FontWeight.normal))),
                        Flexible(
                            child: Text(categoryName,
                                maxLines: 3,
                                style: TextStyle(
                                    color: Colors.lightBlue,
                                    fontWeight: FontWeight.normal))),
                        Spacer(),

                        Text("#33088",
                            style: TextStyle(
                                color: Colors.black26,
                                fontWeight: FontWeight.normal))

                      ])

当标签文本未换行时，我得到的标签换行不正确，并且标签仍然没有右对齐：

我需要我的列表看起来像第一张图片，但标签“#33088”需要始终右对齐，无论类别标签是否被包裹。没有剩余空间时需要包装类别标签，也由“#33088”标签占用。

如何正确地做到这一点？

[编辑]

部分基于以下回复，它看起来有效：

Row(
                          children: <Widget>[
                        Padding(
                            padding: EdgeInsets.only(right: 8.0),
                            child: Text(
                                categoryIcon,
                                style: TextStyle(color: Colors.lightBlue, fontFamily: 'Fontawesome', fontWeight: FontWeight.normal))),

                            Flexible(
                                child: Row(
                                  children: [
                                    Flexible(
                                      child: Text(categoryName,
                                          maxLines: 3,
                                          style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)),
                                ),
                              ],
                            )),

                        Visibility(
                          visible: type == ResponseMessageType.MESSAGE_TYPE_EVENT,
                          child: Expanded(
                            flex: 0,
                            child: Text("#" + id, style: TextStyle(color: Colors.black26, fontWeight: FontWeight.normal)),
                          ),
                        )

                      ])

（对不起，现在包括一些逻辑）。但我对此并不满意，尤其是，我不明白我为什么需要这个：

Flexible(
                                child: Row(
                                  children: [
                                    Flexible(
                                      child: Text(categoryName,
                                          maxLines: 3,
                                          style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)),
                                ),
                              ],
                            )),

如果我Flexible改为单：

Flexible(
          child: Text(categoryName,
          maxLines: 3,
          style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)),
        )   

再次 #id 标签未对齐。使用包含单个 Flexible 的行，再次用 Flexible 包装，它似乎正在工作。

标签： flutterlayoutalignmentrow

Answer 1

检查边框阴影和高程属性希望您能找到答案