Flutter-如何限制文字长度 [英] Flutter - How to limit text length

问题描述

我是新手.当我使用 TextSpan 小部件时如何限制文本?

我的代码

  Widget build(BuildContext context){返回填充(填充:const EdgeInsets.symmetric(vertical:8.0)，子级:Row(子代:< Widget> [展开(弹性:2子级:Row(子代:< Widget> [堆(子代:< Widget> [ClipRRect(borderRadius:BorderRadius.all(Radius.circular(8))，子:Image.asset(lastPlayedGame.imagePath，高度:60，宽度:45，适合:BoxFit.cover，)，)，定位(左:8右:8上:0，底部:0，子代:集装箱(装饰:BoxDecoration(形状:BoxShape.circle，颜色:Colors.white，)，孩子:图标(Icons.play_arrow，颜色:Colors.red，)，)，)，]，)，填充(填充:const EdgeInsets.symmetric(水平:12)，子:RichText(文字:TextSpan(子级:[TextSpan(text:lastPlayedGame.name，style:headingTwoTextStyle，)，TextSpan(text:'\ n')，TextSpan(文本:"$ {lastPlayedGame.hoursPlayed}小时的播放时间"，样式:bodyTextStyle)，])，)，)]，)，)，展开(子级:GameProgressWidget(screenWidth:screenWidth，gameProgress:gameProgress)，)，]，)，);}} 

在我的android设备上运行时，发现错误 RenderFlex在右侧溢出了15个像素.

如何限制文字长度?也许检查一下，如果屏幕上显示的文字最大，将显示 Assasin's Creed ... (可能带有点?)

谢谢

解决方案

如果要使用

  import'package:flutter/material.dart';void main()=>runApp(MyApp());MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(家:脚手架(身体:中心(子代:集装箱(填充:EdgeInsets.all(4.0)，颜色:Colors.lime，宽度:200.0，子级:Row(子代:< Widget> [灵活的(子:RichText(溢出:TextOverflow.ellipsis，strutStyle:StrutStyle(字体大小:12.0)，文字:TextSpan(样式:TextStyle(颜色:Colors.black)，文字:很长的文字:)')，)，)，容器(宽度:100.0，高度:100.0，颜色:Colors.orangeAccent，)]，)，))，)，);}} 

I'm new in flutter. How to limit text when I use TextSpan widget?

My code

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

When run in my android device, error found A RenderFlex overflowed by 15 pixels on the right.

How to limit text lenght? Maybe check, if text it maximum in screen, will show Assasin's Creed... (with dots maybe ?)

Thanks

解决方案

If you want to use your RichText Widget inside a Row and prevent the overflow with an ellipsis, you first have to wrap it inside a Flexible. The Flexible shows the Row that the RichText can be shrinked.

After wrapping the RichText inside a Flexible, simply add overflow: TextOverflow.ellipsis to your RichText. Here a minimal example with a RichText inside an Flexible inside 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,
              )
            ],
          ),
        )),
      ),
    );
  }
}

这篇关于Flutter-如何限制文字长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！