如何在 Flutter 的一行内对齐 TextFormField 和 Text 小部件？答案

【问题标题】：How do I align a TextFormField and Text widget inside a row in Flutter?如何在 Flutter 的一行内对齐 TextFormField 和 Text 小部件？
【发布时间】：2021-11-20 05:12:49
【问题描述】：

我是 Flutter 的新手，我想将屏幕截图中显示的文本小部件对齐到行的底部，使其与文本表单字段位于同一行。我想将“公斤”移到该行的底部。

代码如下：

  return Row(
    children: [
      Flexible(
        child: TextFormField(
          decoration: InputDecoration(labelText: label),
          keyboardType: _getKeyboardType(),
          validator: (value) => _getFormValidator()(value),
          onSaved: (value) { saveAction(formItem,value); },
          onTap: () {print(TextInputType.emailAddress);},
        ),
      ),
      Text('Kilos',style: TextStyle(backgroundColor: Colors.red),)
    ],
  );

我尝试将 Row 和 Text 小部件包装在 Align 小部件中。

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以尝试使用内在高度并制作您的crossAlignment.end

IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Flexible(
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: TextFormField(
                      decoration: InputDecoration(labelText: "label"),
                     /* keyboardType: _getKeyboardType(),
                      validator: (value) => _getFormValidator()(value),
                      onSaved: (value) {
                        saveAction(formItem, value);
                      },*/
                      onTap: () {
                        print(TextInputType.emailAddress);
                      },
                    ),
                  ),
                ),
                Text(
                  'Kilos',
                  style: TextStyle(backgroundColor: Colors.red),
                )
              ],
            ),
          )

输出：

【讨论】：

谢谢，它只适用于“CrossAxisAlignment.end”属性。抱歉，我是 dart 新手，不明白结尾意味着 CrissAxisAlignment 的底部。

【解决方案2】：

您可以使用 Stack.. 这是示例代码。

Stack(
    children: [
      TextFormField(
        decoration: const InputDecoration(
            hintText: 'Enter a search term'
        ),
      ),
      Positioned(
          right: 0,
          bottom: 0,
          child: Text(
            'Kilos',
            style: TextStyle(backgroundColor: Colors.red),
          ))
    ],
  ),

【讨论】：