flutter - 颤振基线文本对齐与 Wrap 类

Question

使用Row该类，我可以使文本基线与此属性对齐：

crossAxisAlignment: CrossAxisAlignment.baseline,

Wrap但是这个属性似乎在课堂上不可用。使用Wrap而不是的好处Row是它允许多行文本。而Row类强制内容保持在一行中。

如何Wrap在使文本基线对齐的同时保持 的好处？

标签： flutterflutter-layout

Answer 1

我也有这个问题。Flutter Repo 中有一个未解决的问题来解决这个问题。虽然内置的解决方案还没有实现，但我确实想出了一个稍微有点hacky的解决方法。

基本上，取决于您的字体和您的需求...

设置你Wrap()有crossAxisAlignment: WrapCrossAlignment.end,。然后你可以让你Wrap()的 a 的一个孩子Column()有一个SizedBox()作为最低的孩子，你需要让它看起来像你的文本使用不存在的高度WrapCrossAlignment.baseLine

问题示例：

如上所述的解决方案示例（我确实指出这有点骇人听闻）：

编码：

class WrapBaselineHackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(border: Border.all(color: Colors.red)),
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.end,
        spacing: 8,
        children: [
          Text(
            '\$50,000.00',
            style: TextStyle(fontSize: 24),
          ),
          Column(
            children: [
              Text('Is a lot of money'),
              //this is needed because Wrap does not have WrapCrossAlignment.baseLine
              const SizedBox(height: 3),
            ],
          ),
        ],
      ),
    );
  }
}