dart - 如何使 TextFormField 文本在验证时显示在 TextFormField 行下方

Question

这是我目前面临的情况，因为我希望红色文本出现在该行的正下方而不是上方，因为它看起来有点丑陋，如下所示:

          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                    color: Color.fromRGBO(58, 66, 86, 1.0),
                    width: 0.5,
                    style: BorderStyle.solid),
              ),
            ),
            padding: const EdgeInsets.only(left: 0.0, right: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Expanded(
                  child: TextFormField( // LOGIN SCREEN EMAIL
                    maxLines: 1,
                    keyboardType: TextInputType.emailAddress,
                    autofocus: false,
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: LOGIN_SCREEN_EMAIL_HINT,
                      hintStyle: TextStyle(color: Colors.grey),
                    ),
                    validator: (value) => value.isEmpty ? LOGIN_SCREEN_EMAIL_WARNING : null,
                    onSaved: (value) => _email = value,
                  ),
                ),
              ],
            ),
          ),

Answer 1

根据您的代码，该行不是文本字段的行。它是容器底部边框。尝试删除容器底部边框并使用 TextFromField 边框线，如下所示

TextFormField(
  ...
  decoration: InputDecoration(
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Theme.of(context).primaryColor, width: 0.5)
    )
  ),
  ...
)