Question

当我单击带有子TextFormField的容器时，装饰消失了。

这是应用程序的当前行为：

似乎是backgroundBlendMode属性的问题，但我不知道如何在没有属性的情况下创建相同的设计。


  static Decoration _buttonDecoration = BoxDecoration(
      backgroundBlendMode: BlendMode.modulate,
      color: Color(0xFF938890),
      borderRadius: BorderRadius.all(Radius.circular(45)));

  Widget _emailTextField = _createTextField('Email', TextInputType.emailAddress,
      Icon(Icons.email, color: Colors.white));

  Widget _passwordTextField = _createTextField(
      'Password',
      TextInputType.text,
      Icon(
        Icons.lock,
        color: Colors.white,
      ));

static Widget _createTextField(
      String hintText, TextInputType textInputType, Icon icon) {
    return Container(
      padding: EdgeInsets.only(left: 20, right: 20),
      decoration: _buttonDecoration,
      margin: EdgeInsets.only(top: 20),
      width: 250,
      child: TextFormField(
        focusNode: FocusNode(),
        obscureText: textInputType == TextInputType.text ? true : false,
        maxLines: 1,
        keyboardType: textInputType,
        autocorrect: true,
        textInputAction: TextInputAction.done,
        style: TextStyle(color: Colors.white),
        decoration: InputDecoration(
            border: InputBorder.none,
            icon: icon,
            hintText: hintText,
            hintStyle: TextStyle(color: Colors.white)),
      ),
    );
  }

Answer 1

您需要对代码进行一些更改。

首先，请勿使用Container装饰TextFormField，因为此小部件已经可以处理这种样式。
如果需要的话，使用prefixIcon而不是icon将其保留在TextFormField内。
如果您需要设置小部件的大小（不使用width属性），则可以使用SizedBox。
它不是直接相关的，但是不要使用返回小部件的方法。您应该创建单独的Stateless或Stateful小部件。

这里有个例子：

OutlineInputBorder _outlineBorder = OutlineInputBorder(
  borderRadius: BorderRadius.all(Radius.circular(45)),
  borderSide: BorderSide(
    style: BorderStyle.none,
  ),
);


SizedBox(
  width: 250.0,
  child: TextFormField(
    style: TextStyle(
      color: Colors.white,
    ),
    decoration: InputDecoration(
      border: _outlineBorder,
      enabledBorder: _outlineBorder,
      focusedBorder: _outlineBorder,
      prefixIcon: Icon(
        Icons.mail,
        color: Colors.white,
      ),
      hintText: 'Email',
      hintStyle: TextStyle(color: Colors.white),
      filled: true,
      fillColor: Colors.black45.withOpacity(0.4),
    ),
  ),
),

更新：

对其进行了测试，但忘记将相同的样式应用于enabledBorder和focusedBorder。这样，在聚焦于TextFormField时，边框颜色不会改变。我已经更新了代码以反映这一点。

单击TextFormField后，容器装饰消失

1 个答案: