Flutter - 如何限制文本长度

Question

我是颤振的新手。使用TextSpan小部件时如何限制文本？

我的代码

Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Row(
              children: <Widget>[
                Stack(
                  children: <Widget>[
                    ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(8)),
                      child: Image.asset(
                        lastPlayedGame.imagePath,
                        height: 60,
                        width: 45,
                        fit: BoxFit.cover,
                      ),
                    ),
                    Positioned(
                      left: 8,
                      right: 8,
                      top: 0,
                      bottom: 0,
                      child: Container(
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                        child: Icon(
                          Icons.play_arrow,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 12),
                  child: RichText(
                    text: TextSpan(children: [
                      TextSpan(text: lastPlayedGame.name, style: headingTwoTextStyle,),
                      TextSpan(text: '\n'),
                      TextSpan(text: "${lastPlayedGame.hoursPlayed} hours played", style: bodyTextStyle),
                    ]),
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: GameProgressWidget(screenWidth: screenWidth, gameProgress: gameProgress),
          ),
        ],
      ),
    );
  }
}

在我的 android 设备中运行时，发现错误 A RenderFlex overflowed by 15 pixels on the right.

如何限制文本长度？也许检查一下，如果在屏幕上显示最大文本，将显示Assasin's Creed...（可能带有点？）

谢谢

Answer 1

如果您想自定义它，也可以尝试以下方法：

Text(
  _name.length > 10 ? _name.substring(0, 10)+'...' : _name,
   style: TextStyle(
     color: Colors.white,
     fontSize: 22,
     fontWeight: FontWeight.w500,
   ),
 ),

ellipsis如果文本长度超过 10则显示。

Answer 2

如果您想在Row 中使用RichText Widget并防止省略号溢出，您首先必须将其包装在Flexible 中。在显示了该可收缩。FlexibleRowRichText

将RichTexta包裹在里面后Flexible，只需添加overflow: TextOverflow.ellipsis到您的RichText. 这是一个带有RichText内部Flexible内部 a的最小示例Row。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: 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,
              )
            ],
          ),
        )),
      ),
    );
  }
}

Answer 3

不需要使用RichText。只需添加您的Text参数， overflow: TextOverflow.ellipsis并使用 Wrap the Text 小部件Flexible

示例：

 Row(
            children: <Widget>[
              Icon(Icons.location_on, color: Colors.grey),
              Flexible(
                  child: Text(propertyModel.propertyAddress, style: AppTextStyle.headerSmall2(context),
                 overflow: TextOverflow.ellipsis),
              )
            ],
          ),

Answer 4

尝试设置溢出属性：

    overflow: TextOverflow.ellipsis