Flutter 文本在列表中没有被省略答案

【问题标题】：Flutter text is not ellipsized in the listFlutter 文本在列表中没有被省略
【发布时间】：2019-06-01 11:59:04
【问题描述】：

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

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,
                      ),
                    ),
                    ...
                  ])
            ],
          ),
        )

将Container 包裹在Flexible 或Expandable 中不起作用。

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

【问题讨论】：

标签： flutter flutter-layout ellipsis

【解决方案1】：

将Expanded 添加到您的Column 以根据剩余空间为其提供固定宽度。

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,
                  ),
                ),
                ...
              ])
          ),
        ],
      ),
    )

【讨论】：

【解决方案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,
          ),
        ),
      ),
    ],
  ),
),

【讨论】：

感谢您的回答，但我在Expanded 中写了包装容器不起作用，所以您的解决方案也没有。但是得到你的+1！ :)