Alt*_*ora 9 material-design flutter flutter-layout figma
Figma中的所有文本都有一定的高度,例如1.5,但是当我将该高度设置为TextStyle时,具有新高度的所有行都会与底部对齐。
如果使用居中或对齐小部件 - 结果错误。示例的行中具有底部垂直对齐方式。就像底部的屏幕截图一样。
[
是否可以在 flutter Text wiget 中为每一行设置垂直对齐?或者也许有人有一些有用的提示来解决问题?
Text(
'Example\nExample',
textAlign: TextAlign.center,
style:TextStyle(
height: 2.5,
fontSize: 20,
),
);
Run Code Online (Sandbox Code Playgroud)
解决方案:
正如user1032613所建议的,这样的解决方案很有帮助。
final text = 'Example Example\nExample Example';
const double height = 2.5;
const double textSize = 16.0;
const double bottomPadding = (height * textSize - textSize) / 2;
const double baseline = height * textSize - height * textSize / 4;
final Widget textWidget = Container(
color: const Color(0xFFFFFFFF),
padding: const EdgeInsets.only(bottom: bottomPadding),
child: Baseline(
baselineType: TextBaseline.alphabetic,
baseline: baseline,
child: Text(
text,
style: const AppTextStyle(
height: height,
fontSize: textSize,
color: const Color(0xFFaa3a3a),
),
),
),
);
Run Code Online (Sandbox Code Playgroud)
int*_*tor 20
有一个名为的属性leadingDistribution可以用于此目的:
Text(
'text',
style: TextStyle(
height: 2.0,
leadingDistribution: TextLeadingDistribution.even,
),
)
Run Code Online (Sandbox Code Playgroud)
来自评论:
修改该字段后,热重载不会生效,需要热重启
| 归档时间: |
|
| 查看次数: |
4194 次 |
| 最近记录: |