flutter - Text Widget Flutter 显示部分字符并显示省略号

Question

我有两个切换按钮，里面有一个文本小部件。如果文本的长度更长，我只想在按钮小部件中显示一些字符并显示椭圆。由于 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())]

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

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