flutter fittedBox不使用多行

niwlg2el  于 2023-04-13  发布在  Flutter
关注(0)|答案(3)|浏览(144)

我有一个页面,我设置了一个人的一些属性。保存属性后,我想在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),
              ),
            ),
    );
  }
}
py49o6xq

py49o6xq1#

FittedBox总是试图将任何小部件调整到其父级的边界,因此长名称变得越来越小是很自然的。对于“fit and multilne”没有完美的解决方案,只有当你使用LayoutBuilder根据constraints硬编码一些值时。但它不会完美地工作,也不会用于很长的名称。相反-给予一些fontSize到文本并设置它's的maxLines属性设置为所需的行数,设置overflow: TextOverflow.ellipsis,以便将长名称 Package 在所需的行数中,并在最后添加3个点-这是“有限容器中的长文本”用例的常见折衷方案。示例:

Text('veryveryveryLongNameeee', maxLines:3, overflow:TextOverflow.ellipsis, style: TextStyle(fontSize: 10))
jum4pzuy

jum4pzuy2#

由于FittedBox,您将获得单行。UI可以使用Padding将文本放置在圆圈和minFontSize中。

leading: CircleAvatar(
  // backgroundColor: userModel.items[i].color,
  child: Padding(
    padding: const EdgeInsets.all(5),
    child: AutoSizeText(
      " userModel.items[i].name",
      minFontSize: 7, //min size
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        color: Color.fromARGB(255, 244, 244, 244),
      ),
      maxLines: 5,
    ),
  ),
  // foregroundImage: FileImage(userModel.items[i].image!),
),

wgxvkvu9

wgxvkvu93#

一个简单的解决方法是在fitted box中强制使用两行,在中间使用**\n**,在这里你想将文本分成两行
FittedBox( fit: BoxFit.scaleDown, child: Text( softWrap: true, maxLines: 2, "Save\nfilters", )),

相关问题