Container(
margin: EdgeInsets.only(left: 8, top: 8, right: 3, bottom: 10),
constraints: BoxConstraints(
maxHeight: 28 * 4,
),
child: ListView.builder(
itemCount: 4,
itemBuilder: (context, index) {
return itemWidget(context, index);
}
),
),
因为我做的是跑马灯样式的, 截图略有问题
Container 如果里面只是单纯文字(文字展示的话自己再调吧,我没细致调整)
Widget itemWidget(BuildContext context, int index) {
double cardWidth = (MediaQuery.of(context).size.width - 44)/2 - 11;
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 20,
constraints: BoxConstraints(
maxWidth: cardWidth,
),
margin: EdgeInsets.only(top: 8),
decoration: BoxDecoration(
color: Color(0x66ffffff),
border: Border.all(width: 0.5, color: Color(0x66FF0808)),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Expanded(
child: Text(
(index%2==0) ? ''语言攻击$index'' : '刘朋反馈,财经后台,应用中心后台,应朋反馈,财经后台,应用中心后台,应朋反馈,财经后台,应用中心后台,应用中心-小$index',
style: TextStyle(
color: Color(0xFF560303),
fontSize: 8,
fontWeight: FontWeight.w400,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
],
);
}
如果图文的话(我这只用到这里)Text 文字外包了一层Container,要不然没法自适应宽度
Widget itemWidget(BuildContext context, int index) {
double cardWidth = (MediaQuery.of(context).size.width - 44)/2 - 11;
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 20,
constraints: BoxConstraints(
maxWidth: cardWidth,
),
margin: EdgeInsets.only(top: 8),
decoration: BoxDecoration(
color: Color(0x66ffffff),
border: Border.all(width: 0.5, color: Color(0x66FF0808)),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Card(
margin: EdgeInsets.only(left: 2, top: 2, bottom: 2, right: 6),
shape: RoundedRectangleBorder(
borderRadius: BorderRadiusDirectional.circular(8),
),
clipBehavior: Clip.antiAlias,
child: Image.network(
'https://imgm.gmw.cn/attachement/jpg/site215/20210812/8692573091945953206.jpg',
fit: BoxFit.fill,
width: 16,
height: 16,
)
),
Container(
margin: EdgeInsets.only(right: 4),
constraints: BoxConstraints(
maxWidth: cardWidth - 30,
),
child: Text(
(index%2==0) ? ''语言攻击$index'' : '刘朋反馈,财经后台,应用中心后台,应朋反馈,财经后台,应用中心后台,应朋反馈,财经后台,应用中心后台,应用中心-小$index',
style: TextStyle(
color: Color(0xFF560303),
fontSize: 8,
fontWeight: FontWeight.w400,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
],
);
}
此文章仅做学习记录使用,如有不足之处请各位大神指出,谢谢