问题描述
我试图裁剪我在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,)
],)),