Flutter 文本小部件颤振显示一些字符并显示省略号

我有两个切换按钮，里面有一个文本小部件。我只想在按钮小部件中显示一些字符，如果文本的长度更大，则显示椭圆。因为按钮文本是动态的，可能会发生变化

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

textButton有一个错误，文本被溢出。如果文本小部件被放置，它将被剪裁，当添加媒体查询时，我可以看到ELIIP

代码

切换按钮(
儿童：[
容器(
宽度：displaySize.width*0.4，
页边距：仅限边集（右：10），
孩子：TextButton.icon(
样式：钮扣样式(
形状：MaterialStateProperty.all（倒角矩形边框（边框半径：borderRadius.all（半径.圆形（5））），
),
),
标签：文本(
“Werrtfeteefgeefg”，
溢出：TextOverflow.省略号，
),
图标：图标(
Icons.location\u pin，
颜色：主题。背景。强调颜色，
尺寸：24.0，
),
已按下：（）{
切换滤波器（0）；
CityPickDialog（）
.ShowCityPicking对话框（上下文）
.然后（（值）{
if（value.isNotEmpty）{
杂项日志消息(
标记，“CityPickDialog${value.toString（）}”）；
设置状态（）{
cityPicked=value.toString（）；
});
}
});
},
),
),
容器(
页边距：仅限边集（右：10），
子项：TextButton.icon（））]

试试这个：

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

切换按钮(
儿童：[
容器(
宽度：100，
孩子：TextButton.icon(
按下：（）{}，
样式：钮扣样式(
形状：MaterialStateProperty.all(
斜面矩形边框(
borderRadius:borderRadius.all（半径.圆形（5）），
),
),
标签：集装箱(
宽度：20，
子：文本(
“Werrtfeteefgeefg”，
溢出：TextOverflow.省略号，
),
),
图标：图标(
Icons.location\u pin，
颜色：主题。背景。强调颜色，
尺寸：24.0，
),
),
),
容器(
宽度：50，
子：文本(
"拉拉拉拉",，
溢出：TextOverflow.省略号，
),
),
容器(
宽度：50，
子：文本(
"拉拉拉拉",，
溢出：TextOverflow.省略号，
),
),
],
isSelected:[对，错，错]，
),

因为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,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

---

它不起作用。我的文本小部件位于切换按钮的一个按钮内。随着文本大小的增加，它会奇怪地进入屏幕，文本会溢出。更新答案，请尝试此操作，但在TextButton中不起作用。图标（）再次更新widgetupdated，tryIt确实被剪裁，但FlitterUI抛出错误溢出，我有一个解决方案，但它的手动小部件树我会发布它

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