包含TextField的RichText：垂直对齐

Question

我想使用包含 TextSpans 以及内联 TextFields（在 WidgetSpans 内）的 RichText 小部件。 TextField 文本应与 TextSpan 对齐到相同的垂直基线。

如何实现这种垂直对齐？

我使用以下代码：

RichText(
        text: TextSpan(style: TextStyle(color: Colors.black), children: [
      TextSpan(text: "Text1 "),
      WidgetSpan(
          child: SizedBox(
              width: 50,
              child: TextField(
                decoration: InputDecoration(hintText: "input"),
              ))),
      TextSpan(text: " Text2")
    ]));

这会导致以下外观：

这就是它应该的样子：

Answer 1

您可以在

PlaceholderAlignment

上提供

WidgetSpan

。

WidgetSpan(
  alignment: PlaceholderAlignment.baseline,

TextFiled 高度大于文本高度，可以用 SizedBox 换行。我也建议为此使用

Baseline

。

Baseline(
  baseline: 50,
  baselineType: TextBaseline.alphabetic,
  child: RichText(
    text: TextSpan(
      style: TextStyle(color: Colors.black),
      children: [
        TextSpan(text: "Text1 "),
        WidgetSpan(
          alignment: PlaceholderAlignment.baseline,
          baseline: TextBaseline.alphabetic,
          child: SizedBox(
            width: 50,
            height: 30,
            child: TextField(
              decoration: InputDecoration(hintText: "input"),
            ),
          ),
        ),
        TextSpan(text: " Text2")
      ],
    ),
  ),
),