textspan的文本不会显示出来的话，如果它溢出

Question

That's how it looks when I have a WidgetSpan and a TextSpan, and the text inside the TextSpan is too long:

problem

这里已经提出了一个类似的问题 TextSpan的文本不会显示它是否溢出，并以Widgetspan 放置，但是一个答案不适合我的问题。

我有两个text.rich（） widgets（每个主机一个widgetspan和一个textspan> textspan ）展开了widget，都带有flex：1的扩展，因为我希望它们的大小相同并尽可能多地占用空间。这就是为什么一排不是一个选项的原因，您（据我所知）不能并排放置两行，这发生了...

使用行

仅使用witchoverflow.ellipsis，如果文本太长：

target ui

< img src =“ https://i.sstatic.net/4ps2b.png” alt =“ target 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，请使用包装小部件而不是行小部件。在这里，当小部件溢出/超过它的内容将其分解为下一行，因此您将实现目标UI。

Answer 2

当我们喜欢归档此UI时，我们将行用作父窗口小部件，这是完美的。然后，我们可以将行分为树的零件，左两个部分将获得相同的宽度和最大可用宽度。对于这种情况，小部件结构如下。

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添加使用对齐：lastholderalignmign.middle， on widgetspan以设置中间。

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

您将获得

我正在使用额外的容器指向UI，只需从列中删除容器即可。另外，您可以使用行而不是富文本。

测试窗口

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,
    );
  }
}

小部件有关 flutter布局