TextOverflow在Text Widget Flutter中不起作用

如何解决TextOverflow在Text Widget Flutter中不起作用

我试图裁剪我在Flutter应用程序中拥有的foodItem的描述，我试图在我的Text（）小部件中添加“ overflow：TextOverflow.clip”，但这实际上并没有用...我将分享特定的小部件，然后是完整文件。

Text('This is a very long description.....................',overflow: TextOverflow.clip,softWrap: true,style: TextStyle(
    fontSize: 9.0,color: Colors.black38,),

完整文件。

import 'package:eva_icons_Flutter/eva_icons_Flutter.dart';
import 'package:Flutter/material.dart';
import '../model/food.dart';
import '../style/theme.dart' as Style;

class FoodList extends StatelessWidget {

  final foodItems = <Food>[
    Food(
      title: "Jimmy's Steak",price: "34.00",img: 'assets/icons/foods/food5.jpg',rating: "4.2"
    ),Food(
      title: "Butter Steak",price: "45.00",img: 'assets/icons/foods/food6.jpg',Food(
      title: "Sushi",price: "10.00",img: 'assets/icons/foods/food7.jpg',rating: "4.7"
    )
  ];
  @override
  Widget build(BuildContext context) {
    return ListView(
        scrollDirection: Axis.horizontal,children: foodItems.map<Widget>((Food food) {
          return GestureDetector(
            onTap: () {

            },child:  Padding(
            padding: EdgeInsets.only(left: 20.0,top: 10.0,bottom: 20.0),child: Container(
              width: 170,decoration: Boxdecoration(
                    color: Colors.white,border: Border.all(color: Colors.grey[300],width: 1.0),borderRadius: BorderRadius.all(Radius.circular(10))),child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
                  Container(
                    height: 180.0,decoration: Boxdecoration(
                      borderRadius: BorderRadius.only(topLeft:Radius.circular(10),topRight:Radius.circular(10)),image: decorationImage(
                        image: Assetimage(food.img),fit: BoxFit.cover
                      )
                    ),SizedBox(
                    height: 10.0,Padding(
                    padding: const EdgeInsets.only(left: 10.0),child: Text(
                      food.title,style: TextStyle(
                          color: Colors.black,fontSize: 12.0),SizedBox(
                    height: 5.0,Padding(
                    padding: const EdgeInsets.only(left:10.0,right: 10.0),child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
                        Row(
                      crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
                          Text('This is a very long description.....................',style: TextStyle(
                            fontSize: 9.0,SizedBox(
                          width: 5.0,/* Icon(EvaIcons.star,color: Style.Colors.mainColor,size: 8.0,Icon(EvaIcons.star,*/
                        SizedBox(
                          width: 5.0,/*    Text("(200)",style: TextStyle(
                          fontSize: 9.0,color: Colors.black38
                        ),*/                      ],Text( "\$" + food.price,style: TextStyle(
                      fontSize: 10.0,color: Colors.black,fontWeight: FontWeight.bold
                    ),)
                      ],)
                ],)
          );
        }).toList());
  }
}

我也尝试使用ClipRect窗口小部件，方法是将我的文本窗口小部件包装到其中，但是仍然无法正常工作。.我是Kindo Of卡在这里的，任何帮助将不胜感激。.

解决方法

您可以为以下文本设置String的限制。

String text =
      "This is a very long description.........his is a very long description.........his is a very long description.........his is a very long description.....................";

Text(
  text.length > 30 ? '${text.substring(0,30)}......' : text,style: TextStyle(
  fontSize: 9.0,color: Colors.black38,),)

您还可以检查以下代码。

  Center(
        child: Container(
          padding: EdgeInsets.all(4.0),color: Colors.lime,width: 200.0,child: Row(
        children: <Widget>[
          Flexible(
            child: RichText(
              overflow: TextOverflow.ellipsis,strutStyle: StrutStyle(fontSize: 12.0),text: TextSpan(
                  style: TextStyle(color: Colors.black),text: 'A very long text :)'),Container(
            width: 100.0,height: 100.0,color: Colors.orangeAccent,)
        ],)),