颤振-在溢出时换行文本，如插入省略号或渐隐

我试图创建一行，其中中心文本有一个最大大小，如果文本内容太大，它适合大小。

我插入TextOverflow.ellipsis属性来缩短文本，并插入三重点...，但它不起作用。

main.dart

import 'package:flutter/material.dart';


void main() {
runApp(new MyApp());
}


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new HomePage(),
);
}
}


class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: new Color(0xFF26C6DA),
),
body: new ListView  (
children: <Widget>[
new Card(
child: new Container(
padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
child: new Row(
children: <Widget>[
new Container(
padding: new EdgeInsets.only(right: 24.0),
child: new CircleAvatar(
backgroundColor: new Color(0xFFF5F5F5),
radius: 16.0,
)
),
new Container(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
'Text lar...',
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
),
new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Row(
children: <Widget>[
new Text(
'Bill  ',
style: new TextStyle(
fontSize: 12.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E)
),
),
new Text(
'\$ -999.999.999,95',
style: new TextStyle(
fontSize: 14.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121)
),
),
],
),
new Row(
children: <Widget>[
new Text(
'Limit  ',
style: new TextStyle(
fontSize: 12.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E)
),
),
new Text(
'R\$ 900.000.000,95',
style: new TextStyle(
fontSize: 14.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E)
),
),
],
),
]
)
)
],
),
)
),
]
)
);
}

结果:

enter image description here

预期:

enter image description here

401795 次浏览
小开
最佳答案

你应该把你的Container包装在Flexible中，让你的Row知道Container比它的固有宽度窄是可以的。Expanded也将工作。

截图

Flexible(
child: new Container(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
'Text largeeeeeeeeeeeeeeeeeeeeeee',
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
),
),
小开

我认为父容器需要被赋予适当大小的maxWidth。看起来文本框会填充上面给出的任何空间。

小开 
SizedBox(
width: 200.0,
child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.body2))

只需将其包装在一个小部件中，它可以采用特定的宽度来工作，或者它将假设父容器的宽度。

小开

包装谁的子元素在一行或列中，请包装您的列或行是新的Flexible();

https://github.com/flutter/flutter/issues/4128

小开

您可以使用此代码片段来显示带有省略号的文本

Text(
"Introduction to Very very very long text",
maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
小开

使用省略< em > < / em >

Text(
"This is a long text",
overflow: TextOverflow.ellipsis,
),

enter image description here

< em > < / em >使用消失

Text(
"This is a long text",
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),

enter image description here

使用剪辑< em > < / em >

Text(
"This is a long text",
overflow: TextOverflow.clip,
maxLines: 1,
softWrap: false,
),

enter image description here

注意:

如果你在Row中使用Text，你可以像这样把Text放在Expanded中:

Expanded(
child: AboveText(),
)
小开

修复一行内文本部件溢出的一种方法，例如聊天消息可以是很长的一行。你可以创建一个Container和一个带有maxWidth的BoxConstraint。

            Container(
constraints: BoxConstraints(maxWidth: 200),
child: Text(
(chatName == null) ? " ": chatName,
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.black87,
fontSize: 17.0),
)
),
小开

你可以这样做

Expanded(
child: Text(
'Text',
overflow: TextOverflow.ellipsis,
maxLines: 1
)
)
小开

首先，将Row或Column包装在Expanded小部件中

然后

Text(
'your long text here',
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
style: Theme.of(context).textTheme.body1,
)
小开

根据您的情况，我认为这是以下最好的方法。

final maxWidth = MediaQuery.of(context).size.width * 0.4;
Container(
textAlign: TextAlign.center,
child: Text('This is long text',
constraints: BoxConstraints(maxWidth: maxWidth),
),
小开

试一试:

 Expanded(
child: Container(
child: Text('OVER FLOW TEST TEXTTTT',
overflow: TextOverflow.fade)),
),

这将显示OVER FLOW。如果有溢出，将会被处理。

小开

如果您只是将文本作为列的子(ren)，这是自动换行文本的最简单方法。假设你没有更复杂的问题。在这些情况下，我认为您应该创建适合的容器大小，并在其中放入另一列，然后放入文本。这似乎工作得很好。容器希望缩小到其内容物的大小，这似乎与需要更多努力的包装自然冲突。

Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('This long text will wrap very nicely if there isn\'t room beyond the column\'s total width and if you have enough vertical space available to wrap into.',
style: TextStyle(fontSize: 16, color: primaryColor),
textAlign: TextAlign.center,),
],
),
小开

1. 剪辑

剪切溢出文本以适合其容器。

SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.clip,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),

输出:

enter image description here

2.褪色

将溢出的文本淡出为透明。

SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),

输出:

enter image description here

3.省略

使用省略号表示文本已溢出。

SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),

输出:

enter image description here

4.可见

在容器外渲染溢出的文本。

SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.visible,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),

输出:

enter image description here

请博客: https://medium.com/flutterworld/flutter-text-wrapping-ellipsis-4fa70b19d316

小开

在包选型layout_widgets中有一个非常简单的类TextOneLine。

把你的课文放在那堂课上。

例如:

Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
loadAsset(SVG_CALL_GREEN),
width: 23,
height: 23,
fit: BoxFit.fill,
),
SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextOneLine(
widget.firstText,
style: findTextStyle(widget.firstTextStyle),
textAlign: TextAlign.left,
),
SizedBox(height: 4),
TextOneLine(
widget.secondText,
style: findTextStyle(widget.secondTextStyle),
textAlign: TextAlign.left,
),
],
),
),
Icon(
Icons.arrow_forward_ios,
color: Styles.iOSArrowRight,
)
],
)
小开 
    SizedBox(
width: width-100,
child: Text(
"YOUR LONG TEXT HERE...",
maxLines: 3,
overflow: TextOverflow.clip,
softWrap: true,
style: TextStyle(
fontWeight:FontWeight.bold,
),
),
),
小开

用Expanded()包装容器

Expanded (child: Container(
padding: new EdgeInsets.only(right: 24.0),
child: new CircleAvatar(
backgroundColor: new Color(0xFFF5F5F5),
radius: 16.0,
)
),
new Container(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
'Text lar...',
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
),
小开

使用省略号表示文本已溢出。

SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
小开

你可以先将你的Column包装在Flexible或Expanded中，然后像往常一样使用Text，它会自动被包装。

Container(
child: Row(
children: [
Flexible(
child: Column(
children: [
Text("This text is so long and long and long and long and long and that's why it is not wrapping to next line.")
]
),
)
],
),
),

Wrapped Text截图

小开

enter image description here 在列中，我们通过使用flexibale小部件包装列来实现文本省略，

 Container(
height: SizeConfig.blockSizeVertical * 20,
width: SizeConfig.blockSizeHorizontal * 88,
child: Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
PicClipper(
height: 50,
width: 50,
circularRadius: 30,
circularImage: imageUrl[index]),
SizedBox(
width: SizeConfig.blockSizeHorizontal * 3,
),
const Text(
fontSize: 12,
fontWeight: FontWeight.normal,
text:
'Lorem ipsum dolor sit amet,consectetur adipiscing elit.Lorem ipsum dolor sit amet,consectetur adipiscing elit.',
fontStyle: FontStyle.normal,
textColor: AppColors.blackTextColor,
overflow: TextOverflow.ellipsis,
fontFamily: "Poppins",
maxLine: 3,
textAlign: TextAlign.start,
),
],
),
),
),
小开

enter image description here 在行中，我们将文本省略到第二行，首先用容器包装文本，然后用灵活的小部件

包装容器 
 Container(


height: SizeConfig.blockSizeVertical * 10,
width: SizeConfig.blockSizeHorizontal * 88,


child: Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
PicClipper(height: 50, width:50, circularRadius: 30, circularImage:imageUrl[index]),
SizedBox(
width:
SizeConfig.blockSizeHorizontal * 3,
),
Flexible(
child: Container(
child: const
AppText
(
fontSize: 12,
fontWeight: FontWeight.normal,
text:
'Lorem ipsum dolor sit amet,consectetur adipiscing elit.Lorem ipsum dolor sit amet,consectetur adipiscing elit.',
fontStyle: FontStyle.normal,
textColor: AppColors.blackTextColor,
textOverflow: TextOverflow.ellipsis,
fontFamily: "Poppins",
maxLine: 3,
textAlign: TextAlign.start,
),
),
),


],
),
),
小开

我多次使用列中行来解决这样的问题。这里有一个解决这个问题的好方法:

 return Column(
children: [
Row(
children: const [
Icon(Icons.close, color: Colors.red), // an example icon
// use the flexible widget above the padding
Flexible(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Text(
"Exemple of text",
overflow: TextOverflow.ellipsis, // I used ellipsis, but it works with others (fade, clip, etc.)
maxLines: 1,
),
),
),
],
)
],
);

注意，我将灵活的放在padding之上，因为当文本增加时，padding也会破坏屏幕。只把它放在文本中是没有用的。希望这能有所帮助。

小开

如果您在Row a小部件中遇到问题，请尝试用Expanded包装Text小部件

Row(
children: [
Text('first'),
Expanded(
child: Text('a really long message...'),
)
]
)

提交答案