dart 将字体大小减小到所需大小,否则将文本自动换行

xjreopfe  于 2023-01-18  发布在  其他
关注(0)|答案(3)|浏览(157)

Flutter有一个FittedBox可以缩小文本的字体大小,你如何缩小文本,比如缩小到8px,如果仍然不适合,那么它就换到一个新行?

5lwkijsr

5lwkijsr1#

您可以使用此软件包-auto_size_text
如果在容器中没有调整,它将自动换行。2它将自动调整字体大小。
用法:

AutoSizeText(
  'A really long String',
  style: TextStyle(fontSize: 30),
  minFontSize: 18,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

您也可以通过以下方式设置预设字体大小:

AutoSizeText(
  'A really long String',
  presetFontSizes: [40, 20, 14],
  maxLines: 4,
)
a8jjtwal

a8jjtwal2#

在Flutter中,可以使用FittedBox小部件来减小文本的字体大小,FittedBox有一个fit属性,可以将其设置为BoxFit.scaleDown。
若要在文本仍然不适合时使其换行,可以使用Text构件的softWrap属性并将其设置为true。

FittedBox(
    fit: BoxFit.scaleDown,
    child: Text(
        'Your Text',
        style: TextStyle(fontSize: 8),
        softWrap: true,
    ),
),
yqyhoc1h

yqyhoc1h3#

将LayoutBuilder构件与文本构件的maxLines和softWrap属性一起使用。
示例:

LayoutBuilder(
 builder: (BuildContext context, BoxConstraints constraints) {
   return Text(
     'Your text here',
     maxLines: (constraints.maxHeight / 8.0).floor(),
     softWrap: true,
     style: TextStyle(
       fontSize: 8.0,
     ),
   );
 },
)

LayoutBuilder允许您根据可用空间确定文本的大小。
Text小部件的maxLines属性用于设置文本的最大行数。
softWrap属性设置为true,以便文本可以换到新行。
maxLines设置为(constraints. maxHeight/8.0). floor(),它将根据可用的高度和8px的字体大小计算最大行数。

相关问题