dart 是否可以强制文本控件使用两行间距?

x6h2sr28  于 12个月前  发布在  其他
关注(0)|答案(6)|浏览(131)

我需要找到一种方法来强制Flutter Text小部件使用两个文本行空间,即使行只有一个。例如,在下面的照片中,一张卡片低于另一张,因为Text小部件只使用一个行空间。


的数据
有没有人知道一些技巧,迫使Text小部件使用maxLines空间,即使只有一行是必要的?

lnxxn5zx

lnxxn5zx1#

minLines添加到Text当前是一个开放的功能请求。您可以跟踪它here
目前,建议的解决方法是用途:

str = 'example'; 

Text(
  str + '\n',
  maxLines: 2,
)

字符串

n3schb8v

n3schb8v2#

您可以使用**\n**设置最小行数 (这是一个技巧)
此问题仍然存在Github: Add minLines to Text (flutter issue)

Text(
            '${product.name}\n\n', //equal minlines: 3
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
            style:
                const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
          ),

字符串

2exbekwf

2exbekwf3#

你可以简单地在 TextStyle 中使用 height 属性:

Text(
  "Some lines of text",
  style: TextStyle(
    fontSize: 14.0,
    height: 1.5 //set height as you want
  )
)

字符串
另一个选择是使用 Spacer()

Row(
  children: <Widget>[
    Text('Begin'),
    Spacer(), // Defaults to a flex of one.
    Text('Middle'),
    // Gives twice the space between Middle and End than Begin and Middle.
    Spacer(flex: 2),
    Text('End'),
  ],
)


您可以在official docs here中找到有关Spacer的更多详细信息

pvcm50d1

pvcm50d14#

试试这个,它会工作。

Row(
     children: [
         Expanded(
           flex: 1,
           child: Text(
              'Your long text goes here, you can add as much as you want',
              maxLines: 2,   /// you can change it on your requirements, or may be ignore it
              ),
      )
    ],
)

字符串

k7fdbhmy

k7fdbhmy5#

这是我找到的最好的解决方案。
你可以在一个地方设置所有的文本样式,并得到它像这样

static TextStyle subtitle2(Color color) =>
  initStyle(color, 14.0, FontWeight.w600);

static TextStyle initStyle(
 Color color, 
 double fontSize, 
 FontWeight fontWeight) =>
  TextStyle(
      height: 1.2,
      fontSize: fontSize,
      color: color,
      fontWeight: fontWeight,
      fontFamily: 'OpenSans');

字符串
不要忘记设置文本样式的高度属性
然后你可以像这样定义你的文本

TextStyle textStyle = AppTextStyle.headline6(AppColors.onBackground);
int lines = 3;
...
Container(
      height: textStyle.height! * textStyle.fontSize! * lines,
      child: Text('Title', style: textStyle))


对我来说工作完美
enter image description here

vom3gejh

vom3gejh6#

一个不需要设置maxLines的解决方法是将Text放置在一个Stack中,另一个Text具有(大部分)相同的样式(除了透明),正好有n行。
这样,Flutter将绘制两者,并且它所需的大小将是任何文本的更多行。作为一个额外的好处,您也可以对齐显示文本,使其居中(例如)

return Stack(
  alignment: Alignment.center,
  children: [
    Text(
      "\n\n\n",
      style: Theme.of(context).textTheme.bodyMedium.copyWith(
            color: Colors.transparent,
      ),
    ),
    Text(
      "Single Line of Text",
      style: Theme.of(context).textTheme.bodyMedium,
    ),
  ],
);

字符串
如果我有一个UI,文本在几个可能的值之间变化,我会经常这样做,我不希望它 Package 的容器每次都改变大小。适用于按钮,芯片,段落,无论什么。也适用于用户的字体缩放和文本的任何翻译。

相关问题