flutter-实现左右布局左侧为文字右侧为一个带背景色的盒子。盒子占据除文字外的所有剩余空间文字宽度由内容撑开最大宽度为父级的一半超出后出现省略号
可以使用 Row 和 Expanded 组件来实现左右布局,其中左侧文字可以使用 Text 组件,右侧带背景色的盒子可以使用 Container 组件。
下面是一个示例代码:
Row(
children: [
// 左侧文字
Expanded(
child: Text(
'这是一段很长很长的文字,可能会超出父级的一半宽度,需要进行省略号处理。',
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
// 右侧盒子
Container(
width: double.infinity,
height: 50,
color: Colors.blue,
child: Center(
child: Text(
'右侧',
style: TextStyle(color: Colors.white),
),
),
),
],
)
在这个示例中,使用了 Expanded 组件将左侧文字的宽度设置为尽可能大,同时使用了 maxLines 和 overflow 属性来实现省略号处理。
右侧的盒子使用了 Container 组件,并将宽度设置为 double.infinity,高度设置为固定值,并设置了背景色和居中的文本。
原文地址: https://www.cveoy.top/t/topic/qJB 著作权归作者所有。请勿转载和采集!