Flutter 文本在列表中未被省略

Question

我有一个对象列表。有一个名字可以很长，根据设计如果放不下应该以三个点结尾

Container(
          height: 72,
          constraints: BoxConstraints(minWidth: double.infinity),
          child: Row(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(left: 16.0, right: 16.0),
                child: CircleAvatar(
                  radius: 20.0,
                  backgroundImage: NetworkImage(_model._organizerLogo),
                  backgroundColor: Colors.transparent,
                ),
              ),
              Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.only(right: 8.0),
                      child: Text(
                        _model._eventName,
                        style: TextStyle(
                            fontSize: 15,
                            color: Colors.black,
                            fontWeight: FontWeight.w500),
                        textAlign: TextAlign.start,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    ...
                  ])
            ],
          ),
        )

在 Flexible 或 Expandable 中包装 Container 无效。

如何制作超大文本省略号？谢谢！

Answer 1

将 Expanded 添加到您的 Column 以根据剩余的 space 赋予其固定宽度。

Container(
      height: 72,
      constraints: BoxConstraints(minWidth: double.infinity),
      child: Row(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(left: 16.0, right: 16.0),
            child: CircleAvatar(
              radius: 20.0,
              backgroundImage: NetworkImage(_model._organizerLogo),
              backgroundColor: Colors.transparent,
            ),
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: EdgeInsets.only(right: 8.0),
                  child: Text(
                    _model._eventName,
                    style: TextStyle(
                        fontSize: 15,
                        color: Colors.black,
                        fontWeight: FontWeight.w500),
                    textAlign: TextAlign.start,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ...
              ])
          ),
        ],
      ),
    )

Answer 2

这是可行的解决方案：

Container(
  height: 72,
  constraints: BoxConstraints(minWidth: double.infinity),
  child: Row(
    children: <Widget>[
      Container(
        margin: const EdgeInsets.only(left: 16.0, right: 16.0),
        child: CircleAvatar(
          radius: 20.0,
          backgroundImage: NetworkImage(poolImageUrl),
          backgroundColor: Colors.transparent,
        ),
      ),
      Expanded(
        child: Container(
          padding: EdgeInsets.only(right: 8.0),
          child: Text(
            "This will not overflow now, because we have put it in Expanded, you can try any long string here for test",
            style: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w500),
            textAlign: TextAlign.start,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    ],
  ),
),

Flutter 文本在列表中未被省略

Flutter text is not ellipsized in the list

ellipsis

flutter

flutter-layout