我有一个页面,我设置了一个人的一些属性。保存属性后,我想在ListTile中显示它们,并以CircleAvatar为前导。在这个CircleAvatar中,我想显示一个图像,或者,如果图像不可用,则在背景中显示所选颜色的名称。fittedBox非常适合短名称。但我的问题是长名称或长文本。fittedBoy缩小了字体,所以它适合Circle Avatar。但对于长名称,这不再可读。为了字体更大,我希望fittedBox使用多行。但我尝试的所有方法都不起作用。文本总是调整为适合一行。我尝试了fit属性的所有值,但没有一个合适的。我如何解决这个问题?或者有更好的方法来做到这一点?
class UserShowListView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Consumer<UserModel>(
child: Center(
child: const Text('Noch keine Nutzer angelegt'),
),
builder: (ctx, userModel, ch) => userModel.items.isEmpty
? ch!
: ListView.builder(
itemCount: userModel.items.length,
itemBuilder: (ctx, i) => ListTile(
leading: CircleAvatar(
backgroundColor: userModel.items[i].color,
child: FittedBox(
fit: BoxFit.contain,
child: AutoSizeText(
userModel.items[i].name,
minFontSize: 12,
maxLines: 100,
),
),
foregroundImage: FileImage(userModel.items[i].image!),
),
title: Text(userModel.items[i].name),
),
),
);
}
}
3条答案
按热度按时间py49o6xq1#
FittedBox总是试图将任何小部件调整到其父级的边界,因此长名称变得越来越小是很自然的。对于“fit and multilne”没有完美的解决方案,只有当你使用LayoutBuilder根据
constraints
硬编码一些值时。但它不会完美地工作,也不会用于很长的名称。相反-给予一些fontSize
到文本并设置它's的maxLines
属性设置为所需的行数,设置overflow: TextOverflow.ellipsis
,以便将长名称 Package 在所需的行数中,并在最后添加3个点-这是“有限容器中的长文本”用例的常见折衷方案。示例:jum4pzuy2#
由于
FittedBox
,您将获得单行。UI可以使用Padding
将文本放置在圆圈和minFontSize
中。wgxvkvu93#
一个简单的解决方法是在fitted box中强制使用两行,在中间使用**\n**,在这里你想将文本分成两行
FittedBox( fit: BoxFit.scaleDown, child: Text( softWrap: true, maxLines: 2, "Save\nfilters", )),