Row( children: [ one.isNotEmpty ? Container( padding: EdgeInsets.fromLTRB(10, 5, 10, 5), margin: const EdgeInsets.fromLTRB(0, 5, 10, 5), decoration: BoxDecoration( color: Colors.purple, // 背景颜色 borderRadius: BorderRadius.circular(5.0), // 圆角边界 ), child: Text( '事件', textAlign: TextAlign.end, style: TextStyle( fontSize: 15, color: Colors.white, ), ), ) : SizedBox(), Text( two, textAlign: TextAlign.end, style: TextStyle( fontSize: 17, fontWeight: FontWeight.bold, ), ), Expanded( child: Text( three, textAlign: TextAlign.end, style: TextStyle( fontSize: 15, color: Colors.grey, fontWeight: FontWeight.bold, ), ), ) ], )第二个text数据过长导致第三个text无法显示如何解决
时间: 2024-02-10 10:26:11 浏览: 128
如果第二个Text的文本内容过长导致第三个Text无法完全显示,你可以考虑使用`Overflow`属性来处理文本溢出情况。以下是两种常用的处理方式:
1. 使用`overflow: TextOverflow.ellipsis`设置省略号:
```dart
Row(
children: [
// ...
Expanded(
child: Text(
three,
textAlign: TextAlign.end,
style: TextStyle(
fontSize: 15,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.ellipsis, // 设置省略号
),
)
],
)
```
这样,当第二个Text的文本内容过长时,第三个Text将以省略号显示。
2. 使用`overflow: TextOverflow.visible`设置可见性溢出:
```dart
Row(
children: [
// ...
Expanded(
child: Text(
three,
textAlign: TextAlign.end,
style: TextStyle(
fontSize: 15,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.visible, // 设置可见性溢出
),
)
],
)
```
这样,当第二个Text的文本内容过长时,第三个Text将会完全显示,可能会超出父容器的边界。
根据你的具体需求,选择适合的方式来处理文本溢出即可。另外,根据实际情况可能需要调整Row的布局,例如使用Expanded来控制子控件的占用空间。
阅读全文