TextOverflow在Text Widget Flutter中不起作用

Question

我正在尝试剪辑我在flutter应用程序中拥有的foodItem的描述，我尝试将'overflow：TextOverflow.clip'添加到我的Text((Widget中，但这并没有真正起作用。。。我将共享特定的Widget，然后共享完整的文件。。

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',
rating: "4.2"
),
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.....................',
overflow: TextOverflow.clip,
softWrap: true,
style: TextStyle(
fontSize: 9.0,
color: Colors.black38,
),
), 
SizedBox(
width: 5.0,
),

/* Icon(EvaIcons.star, color: Style.Colors.mainColor, size: 8.0,),
Icon(EvaIcons.star, color: Style.Colors.mainColor, size: 8.0,),
Icon(EvaIcons.star, color: Style.Colors.mainColor, size: 8.0,),
Icon(EvaIcons.star, color: Style.Colors.mainColor, size: 8.0,),
Icon(EvaIcons.star, color: Colors.black38, size: 8.0,), */
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小部件，将我的文本小部件包装到其中，但仍然不起作用。。我有点被困在这里，任何帮助都将不胜感激。。

Answer 1

您可以为如下文本设置字符串的限制。

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