我对Flutter 翼是个新手.当我使用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设备上运行时,我会遇到一个错误:

一个RenderFlex在右侧溢出了15个像素.

enter image description here

如何限制文本长度?也许会判断文本是否是屏幕的最大值,是否会显示Assasin's Creed...(可能会带点?)

推荐答案

如果您想在Row中使用您的RichText小部件,并用省略号防止溢出,您必须首先将其包装在Flexible中.Flexible显示了Row,即RichText可以缩小.

RichText包装在Flexible中后,只需在RichText中添加overflow: TextOverflow.ellipsis即可.这里是一个最小的例子,RichText在一个Flexible在一个Row里.

Demo

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

Dart相关问答推荐

如何获取包含在 Dart 包中的assets资源 的文件路径?

VSCode Flutter Dart 启动慢的建议

如何在 Dart 中创建画布元素?

Dart / Flutter 错误:没有为类Logger定义toStringDeep

异常:在Flatter项目上没有Linux桌面项目配置错误

判断 Future 是否完整

Dart:Streams与 ValueNotifiers

参数类型Map Function()不能分配给参数类型Map

如何使 FadeInImage 循环?

将DateTime转换为ISO 8601

如何在dart中四舍五入?

如何在 Dart 中上传文件?

在 Dart 中实现观察者模式

错误:default constructor is already defined

CoffeeScript 和 Dart 对 JavaScript 的改进之间的主要区别是什么?

可选参数的默认值必须是常量

pub 依赖和 dev_dependencies 有什么区别?

如何在 Dart 中扁平化map列表?

在 Dart 中克​​隆list列表、map或set集合

如何使用 Dart 将字符串解析为数字?