flutter - 如何在 Flutter 行中溢出文本小部件列表

Question

我使用此函数返回小部件列表：

List<Text> lastMessageWidget(String lastMessage_text) {

List<String> lastMessage_words = lastMessage_text.split(' ');

List<Text> textWidgets = [];

for (int i = 0; i < lastMessage_words.length; i++) {
  if (lastMessage_words[i].contains(searchText) && searchText !="") {
    Text highlight = Text(
      lastMessage_words[i] + ' ',
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      softWrap: false,
      style: TextStyle(
        color: fontColor,
        backgroundColor:Colors.pinkAccent.withOpacity(.3),
        fontWeight: FontWeight.normal,
      ),
    );
    textWidgets.add(highlight);
  } else {
    Text normal = Text(
      lastMessage_words[i] + ' ',
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      softWrap: false,
      style: TextStyle(
        color: fontColor,
      ),
    );
    textWidgets.add(normal);
  }
}

return textWidgets;

}

我把它包装成一个 Row ：

Row( children: lastMessageWidget(chats_list[position].lastMessage.content),)

它导致了 RenderFlex 溢出，如下图所示：

我想将TextOverflow.ellipsis应用于此，我花了很长时间搜索和思考，不幸的是我最后一无所获，所以我希望你能帮助我。

标签： flutterdart

Answer 1

您需要设置文本小部件宽度或限制其宽度。

Row(
            children: <Widget>[
              Expanded(
                flex: 1,
                  child: Text(
                'aaaaaaaaaaaaaaaaaaaaaaaaaaaa',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Colors.red),
                maxLines: 1,
              )),
              Expanded(
                  flex: 1,
                  child: Text(
                    'bbbbbbbbbbbbbbbbbbbbbbbbbbbb',
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(color: Colors.blue),
                    maxLines: 1,
                  )),
              Expanded(
                  flex: 1,
                  child: Text(
                    'cccccccccccccccccccccccccccccccccc',
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(color: Colors.yellow),
                    maxLines: 1,
                  )),
              Expanded(
                  flex: 1,
                  child: Text(
                    'ddddddddddddddddddddddddd',
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(color: Colors.blue),
                    maxLines: 1,
                  )),

            ],

          )