TextSpan的文本没有显示它是否溢出

Question

当我有一个WidgetSpan和一个TextSpan，而TextSpan中的文本太长时，情况就是这样：

问题

​

​

TextSpan的文本没有显示它是否溢出并放在WidgetSpan之后这里已经提出了一个类似的问题，但是唯一的答案并不适合我的问题。

我在一个Text.rich()小部件中有两个WidgetSpan小部件(每个都有一个WidgetSpan和一个TextSpan)，两个都是带有flex:1的Expanded，因为我希望它们大小相同，占用尽可能多的空间。这就是为什么行不是一个选项，你不能(据我所知)把两行并排，在这种情况下.

使用行

​

​

这就是如果文本太长的话，TextOverflow.ellipsis应该是这样的样子：

目标UI

​

​

这是我的代码：

                Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Text.rich(
                        TextSpan(children: [
                          WidgetSpan(
                            child: Container(
                              margin: const EdgeInsets.only(right: 4.0),
                              child: SvgPicture.asset("assets/icons/building.svg", color: 
                                     htLightGrey),
                            ),
                          ),
                          TextSpan(
                            text: incident.building.name,
                            style: const TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 16.0,
                              color: htLightGrey, /*overflow: TextOverflow.ellipsis*/
                            ),
                          ),
                        ]),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: incident.department != null
                          ? Text.rich(
                              TextSpan(children: [
                                WidgetSpan(
                                  child: Container(
                                    margin: const EdgeInsets.only(right: 4.0),
                                    child: SvgPicture.asset("assets/icons/department.svg", 
                                           color: htLightGrey),
                                  ),
                                ),
                                TextSpan(
                                  text: incident.department!.name,
                                  style: const TextStyle(fontWeight: FontWeight.normal, 
                                         fontSize: 16.0, color: htLightGrey, overflow: 
                                         TextOverflow.ellipsis),
                                ),
                              ]),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            )
                          : const SizedBox.shrink(),
                    )
                  ],
                )

Answer 1

虽然我们喜欢归档这个UI，但是我们使用Row作为父小部件，这是非常完美的。然后我们可以将行分割成树部分，剩下的两个部分将得到相同的和最大的可用宽度。对于这个场景，小部件结构如下所示。

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.green,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, //start from left
          children: [
            buildItem(
                text:
                    "incident.buildi cident.buildi cident.buildi cident.buildi cident.building.name"),
            buildItem(text: "incide ing.ssss"),
          ],
        ),
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            buildItem(text: "i ent.building.name"),
            buildItem(text: "incident.building.ssss"),
          ],
        ),
      ),
    ),
    IconButton(
      onPressed: () {},
      iconSize: 33,
      icon: Icon(Icons.arrow_right),
    ),
  ],
),

在Text.rich添加中，使用alignment: PlaceholderAlignment.middle, on WidgetSpan设置中间位置。

maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,

你会得到

​

​

我使用额外的容器来指向UI，只需从列中移除容器。此外，您还可以使用Row而不是Rich。

测试小部件

class _TestGroundState extends State<TestGround> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.green,
                child: Column(
                  crossAxisAlignment:
                      CrossAxisAlignment.start, //start from left
                  children: [
                    buildItem(
                        text:
                            "incident.buildi cident.buildi cident.buildi cident.buildi cident.building.name"),
                    buildItem(text: "incide ing.ssss"),
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.red,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    buildItem(text: "i ent.building.name"),
                    buildItem(text: "incident.building.ssss"),
                  ],
                ),
              ),
            ),
            IconButton(
              onPressed: () {},
              iconSize: 33,
              icon: Icon(Icons.arrow_right),
            ),
          ],
        ),
      ],
    ));
  }

  Text buildItem({
    required String text,
  }) {
    return Text.rich(
      TextSpan(
        children: [
          WidgetSpan(
            alignment: PlaceholderAlignment.middle,
            child: Container(
              child: Icon(Icons.ac_unit),
            ),
          ),
          TextSpan(
            text: text,
            style: TextStyle(
              fontWeight: FontWeight.normal,
              fontSize: 16.0,
            ),
          ),
        ],
      ),
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      textAlign: TextAlign.start,
    );
  }
}

更多关于颤振布局的信息

Answer 2

要实现目标Ui，请使用Wrap小部件而不是Row小部件。在这里，当小部件溢出/超出它的内容时，它将中断到下一行，因此您将达到目标Ui。