颤动 - 在文本中插入溢出省略号
raf*_*b21 56 dart flutter flutter-layout
我正在尝试创建一个中心文本具有最大大小的行,如果文本内容太大,则它适合大小.
我插入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)
),
),
],
),
]
)
)
],
),
)
),
]
)
);
}
结果:
预期:
Col*_*son 111
你应该换你Container的Flexible,让你Row知道它的确定为Container比其内在的宽度窄.Expanded也会工作.
new 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,
),
),
),
),
- 我在 Column 上也有类似的问题。这种方法对我不起作用。/sf/ask/3654435501/ (10认同)
- 如果在使用 Column 时此方法不适合您，请将 Column 包装在 Flexible 中 (3认同)
- 这种方法并不总是有效。就我而言，所有 TextFlow 属性（如省略号、淡入淡出或剪辑）不适用于 InkWell 内以及一行和另一行内的文本。行、容器、文本、墨水池、列等上的所有排列都具有扩展且灵活的失败。 (2认同)
Cop*_*oad 51
使用省略号
Text(
"This is a long text",
overflow: TextOverflow.ellipsis,
),
使用淡入淡出
Text(
"This is a long text",
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
使用Clip
Text(
"This is a long text",
overflow: TextOverflow.clip,
maxLines: 1,
softWrap: false,
),
- 如果您的文本和另一个小部件（例如图标）位于一行的中心，则此方法不起作用。 (4认同)
- “softWrap: false”本质上是说水平应用效果而不是垂直应用效果。我没有注意到省略号，但是当切换到淡入淡出时，我需要它，这样它就不会淡化文本底部或只是换行 (3认同)
- `softWrap: false` 正是我所需要的，谢谢！ (2认同)
Abd*_*pal 28
首先，将您的Rowor包装Column在Expanded小部件中
然后
Text(
'your long text here',
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
style: Theme.of(context).textTheme.body1,
)
- 是的，这是正确的方法，首先将 Column 包裹在 Expanded 中确实有效！并使用列子项内的文本。 (2认同)
小智 23
您可以先将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.")
]
),
)
],
),
),
kri*_*yaa 15
Row 内的文本。
1. 第 1 列中文本的偏好 > 第 2 列
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"This is very very long text in column 1 of Row",
style: TextStyle(
overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
),
Flexible(
child: Text("This is very very long text in column 2 of Row",
style: TextStyle(
overflow: TextOverflow.ellipsis,
backgroundColor: Colors.yellow)),
)
],
)
2. 第 2 列中文本的偏好 > 第 1 列
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Flexible(
child: Text(
"This is very very long text in column 1 of Row",
style: TextStyle(overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
),
),
Text("This is very very long text in column 2 of Row",
style: TextStyle(overflow: TextOverflow.ellipsis, backgroundColor: Colors.yellow))
],
)
3. 相同的偏好
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Flexible(
child: Text(
"This is very very long text in column 1 of Row",
style: TextStyle(
overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
),
),
Flexible(
child: Text("This is very very long text in column 2 of Row",
style: TextStyle(
overflow: TextOverflow.ellipsis,
backgroundColor: Colors.yellow)),
)
],
)
列内的文本
定义maxLine属性。
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"This is very very very very very very very very very very very very very very very very very long text in Row 1 of Column",
maxLines: 2,
style: TextStyle(
backgroundColor: Colors.green, overflow: TextOverflow.ellipsis),
),
Text("This is very very long text in Row 2 of Column",
style: TextStyle(
overflow: TextOverflow.ellipsis,
backgroundColor: Colors.yellow))
],
)
注意：如果您的要求是显示条目内容而不溢出但不扰乱约束，请删除该overflow属性但保持Flexible原样：
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Flexible(
child: Text(
"This is very very long text in column 1 of Row",
style: TextStyle(backgroundColor: Colors.green),
),
),
Flexible(
child: Text("This is very very long text in column 2 of Row",
style: TextStyle(
overflow: TextOverflow.ellipsis,
backgroundColor: Colors.yellow)),
)
],
)
Yau*_*pir 14
您可以使用此代码剪切来显示带省略号的文本
Text(
"Introduction to Very very very long text",
maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
- 另外,请包含此代码的说明,以解释它如何回答问题. (9认同)
小智 12
如果例如聊天消息可能是一行非常长的行，则修复一行中文本小部件溢出的一种方法。您可以创建一个包含 maxWidth 的 Container 和一个 BoxConstraint。
Container(
constraints: BoxConstraints(maxWidth: 200),
child: Text(
(chatName == null) ? " ": chatName,
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.black87,
fontSize: 17.0),
)
),
jit*_*555 11
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),
),
),
输出：
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),
),
),
输出：
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),
),
),
输出：
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),
),
),
输出：
请博客： https : //medium.com/flutterworld/flutter-text-wrapping-ellipsis-4fa70b19d316
小智 11
我在列中使用行多次遇到这样的问题。这是修复它的好方法：
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,
),
),
),
],
)
],
);
请注意，我将“灵活”放在填充上方，因为当文本增大时，填充也会破坏屏幕。仅将其放在Text中是没有用的。希望这可以帮助。
小智 9
SizedBox(
width: 200.0,
child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.body2))
只需将小部件包裹在可以采用特定宽度的小部件内即可，否则它将采用父容器的宽度。
你可以那样做
Expanded(
child: Text(
'Text',
overflow: TextOverflow.ellipsis,
maxLines: 1
)
)
根据您的情况，我认为这是以下最好的方法。
final maxWidth = MediaQuery.of(context).size.width * 0.4;
Container(
textAlign: TextAlign.center,
child: Text('This is long text',
constraints: BoxConstraints(maxWidth: maxWidth),
),
如果您只是将文本放置为列的子项，这是让文本自动换行的最简单方法。假设你没有发生任何更复杂的事情。在这些情况下，我认为您可以创建您认为合适的容器大小，然后在里面放置另一列，然后放置文本。这看起来效果很好。容器想要缩小到其内容物的大小，这似乎与包装自然冲突，后者需要更多的努力。
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,),
],
),
使用省略号来指示文本已溢出。
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),
),
),
| 归档时间： |
|
| 查看次数： |
39071 次 |
| 最近记录： |