flutter 中同一行的 TextField 和 Text

Question

我想在 flutter 中制作這樣的Desired Output。例如：我想要這樣的東西：我 __________ 特此說明（然后如果沒有剩余空間，文本將移至下一行），這里 _____ 應該是 TextField 我在哪里可以加上我的名字。

我認為 text 和 TextField 在同一行。 我已經嘗試在 flutter 中實現它，但是如果不添加 Expanded 或 Flexible，TextField 將無法工作，因為它會導致布局錯誤。

或者，如果有一種方法可以讓用戶通過按住它來更改文本，或者像我在應用程序中有這么長的文本，我可以把它留給用戶來更改他們的名字或日期等。那也可以

這是我的代碼，但看起來太糟糕了。

Column(
          children: <Widget>[
            Row(
              crossAxisAlignment: CrossAxisAlignment.baseline, // <--
              textBaseline: TextBaseline.alphabetic,
              children: const <Widget>[
                Text("I"),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(labelText: 'Name'),
                  ),
                ),
                SizedBox(width: 8),
                Expanded(
                  child: Text(
                      'Here the text will come and it will cover up to 10 or more lines and will have textfields in the middle somewhere like in the image.'),
                ),
              ],
            ),
          ],
        ) 

Answer 1

所以在嘗試了一段時間之后，我以這個解決方案結束了。 它不是很好，您需要找到設置TextFormFields樣式的最佳方式，以便它們看起來不錯。

由於我將它們限制為固定大小，您可能還需要將它們單獨設置為您認為合適的長度。 但據我所知，它按預期工作。

Wrap(
    crossAxisAlignment: WrapCrossAlignment.center,
    children: [
      Text("I am a "),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        width: 150,
        height: 50,
        child: TextFormField(
          decoration: InputDecoration(labelText: 'Name'),
        ),
      ),
      Text(" person who likes to "),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        width: 200,
        height: 50,
        child: TextFormField(),
      ),
      Text(" in my free time.")
    ],
  ),

我沒有使用許多小的SizedBoxes ，而是使用了一個Container來指定padding 。 這導致 output 看起來像這樣：

從可用性的角度來看，將TextFormFields與更多Text內聯是否真的有意義，這可能也值得考慮。 在我看來，他們通常應該在移動設備上擁有自己的線路。

Answer 2

您可以使用 IntrinsicWidth 小部件來獲得靈活的 TextField 大小。

RichText(
  text: TextSpan(
    children: <InlineSpan>[
      // first part
      const WidgetSpan(child: Text("Program:  ")),
      // flexible text field
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 64),
              child: const IntrinsicWidth(
                child: TextField(
                    maxLines: null,
                    decoration: InputDecoration(
                        isDense: true,
                        contentPadding: EdgeInsets.all(0))),
              ))),
      // last part
      const WidgetSpan(child: Text("  Index No:  ")),
      // ...
      // ...
    ],
  ),
),

• output是這樣的