flutter - TextOverflow 在文本小部件颤振中不起作用

Question

我正在尝试剪辑我在颤振应用程序中拥有的 foodItem 的描述我尝试将“溢出：TextOverflow.clip”添加到我的 Text() 小部件中，但这并没有真正起作用......我将分享特定的小部件然后是完整的文件..

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 小部件，将我的文本小部件包装到其中，但这仍然不起作用..我有点卡在这里，任何帮助将不胜感激..

标签： fluttertextoverflowflutter-text

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