Text Widget Flutter 显示部分字符并显示省略号答案

【问题标题】：Text Widget Flutter display some characters and display ellipsisText Widget Flutter 显示部分字符并显示省略号
【发布时间】：2021-08-20 06:59:41
【问题描述】：

我有两个切换按钮，里面有一个文本小部件。我只想在按钮小部件中显示一些字符，如果文本长度更长，则显示椭圆。由于 Button 文本是动态的并且可以更改。

如何添加此功能？ Do flutter 有另一个 Text 小部件，它可以获取文本的长度，如果文本的大小超过该长度，则只显示椭圆。

textButton 存在文本溢出的错误。如果放置了 Text 小部件，它将被剪裁，并且在添加媒体查询时我可以看到省略号。

代码

 ToggleButtons(
        children: <Widget>[
          Container(
            width: displaySize.width *0.4,
            margin: EdgeInsets.only(right: 10),
            child: TextButton.icon(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
                ),
              ),
              label: Text(
                "werrtfetreteefgeefg",
                overflow: TextOverflow.ellipsis,
              ),
              icon: Icon(
                Icons.location_pin,
                color: Theme.of(context).accentColor,
                size: 24.0,
              ),
              onPressed: () {
                toggleFilter(0);
                CityPickingDialog()
                    .showCityPickingDialog(context)
                    .then((value) {
                  if (value.isNotEmpty) {
                    Miscellaneous.logMessage(
                        Tag, "CityPickingDialog ${value.toString()}");
                    setState(() {
                      cityPicked = value.toString();
                    });
                  }
                });
              },
            ),
          ),
          Container(
            margin: EdgeInsets.only(right: 10),
            child: TextButton.icon())]

【问题讨论】：

标签： flutter flutter-layout flutter-test text-widget

【解决方案1】：

试试这个：

        ToggleButtons(
          children: <Widget>[
            Container(
              width: 100,
              child: TextButton.icon(
                onPressed: () {},
                style: ButtonStyle(
                  shape: MaterialStateProperty.all(
                    BeveledRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(5))),
                  ),
                ),
                label: Container(
                  width: 20,
                  child: Text(
                    "werrtfetreteefgeefg",
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                icon: Icon(
                  Icons.location_pin,
                  color: Theme.of(context).accentColor,
                  size: 24.0,
                ),
              ),
            ),
            Container(
              width: 50,
              child: Text(
                'lalalalalalalalalalalal',
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              width: 50,
              child: Text(
                'lalalalalalalalalalalal',
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
          isSelected: [true, false, false],
        ),

【讨论】：

它不起作用。我的文本小部件位于一个按钮内，该按钮是切换按钮的一部分。随着文本大小的增加，它奇怪地进入屏幕并且文本溢出。
这可行，但在 TextButton.icon() 小部件中不起作用
它确实被剪裁了，但颤动的 Ui 抛出错误溢出，我有一个解决方案，但它的手动小部件树我会发布它

【解决方案2】：

由于 TextButton.icon 行为异常，我们无法剪切文本。这个解决方案对我有用。但我必须删除 TextButton.icon

  Container(
        child: InkWell(
          onTap: (){
            toggleFilter(0);
            CityPickingDialog()
                .showCityPickingDialog(context)
                .then((value) {
              if (value.isNotEmpty) {
                Miscellaneous.logMessage(
                    Tag, "CityPickingDialog ${value.toString()}");
                setState(() {
                  cityPicked = value.toString();
                });
              }
            });
          },
          child: Container(
            width: displaySize.width *0.5,
            padding: EdgeInsets.all(5),
            child: Row(
              children: [
                Icon(
                  Icons.location_pin,
                  color: Theme.of(context).accentColor,
                  size: 24.0,
                ),
                Container(
                  width: displaySize.width *0.40,
                  child: Text(
                    cityPicked,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

【讨论】：