flutter - 仅当我键入一些文本时如何将标签文本移动到输入文本字段的顶部

Question

我只想在输入一些文本时将标签文本移动到输入文本字段的顶部。目前，当输入文本字段获得焦点时，它会移到顶部。

Widget nameField() {
    return TextFormField(
      keyboardType: TextInputType.text,
      autofocus: false,
      textAlign: TextAlign.start,
      textInputAction: TextInputAction.done,
      controller: nameTextEditingController,
      style: TextStyle(
          color: Colors.white, fontSize: 18, fontWeight: FontWeight.w500),
      decoration: const InputDecoration(
        contentPadding: EdgeInsets.symmetric(vertical: 15),
        labelText: Strings.user_info_page_name_placeholder,
        labelStyle: TextStyle(
            color: Colors.grey, fontSize: 18, fontWeight: FontWeight.w500),
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent, width: 1)),
      ),
    );
  }

Answer 1

我可以想到两种方法来做到这一点。这里的技巧是使用 hintText:

首先:使用onChanged:方法。

代码:

class MyClass extends StatefulWidget {
  @override
  _MyClassState createState() => new _MyClassState();
}

class _MyClassState extends State<MyClass> with SingleTickerProviderStateMixin {
  TextEditingController nameTextEditingController = TextEditingController();
  String _labelText;

  @override
  void initState() {
    super.initState();
   // nameTextEditingController.addListener(_hasStartedTyping);
  }

//  void _hasStartedTyping() {
//    setState(() {
//      if (nameTextEditingController.text.isNotEmpty) {
//        _labelText = 'Name';
//      } else {
//        _labelText = null;
//      }
//    });
//  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 25, vertical: 30),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                keyboardType: TextInputType.text,
                autofocus: false,
                textAlign: TextAlign.start,
                onChanged: (v){
                  setState(() {
                    if(v.isNotEmpty){
                      _labelText = 'Name';
                    }else{
                      _labelText = null;
                    }
                  });

                },
                textInputAction: TextInputAction.done,
                controller: nameTextEditingController,
                style: TextStyle(
                    color: Colors.black87,
                    fontSize: 18,
                    fontWeight: FontWeight.w500),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(vertical: 15),
                  labelText: _labelText,
                  hintText: 'Name',
                  hintStyle: TextStyle(
                      color: Colors.grey,
                      fontSize: 18,
                      fontWeight: FontWeight.w500),
                  labelStyle: TextStyle(
                      color: Colors.grey,
                      fontSize: 18,
                      fontWeight: FontWeight.w500),
                  focusedBorder: OutlineInputBorder(
                      borderSide:
                          BorderSide(color: Colors.transparent, width: 1)),
                ),
              ),
            ],
          )),
    );
  }
}

第二:使用 TextEditingController.addListener() 方法。

代码:

class MyClass extends StatefulWidget {
  @override
  _MyClassState createState() => new _MyClassState();
}

class _MyClassState extends State<MyClass> with SingleTickerProviderStateMixin {
  TextEditingController nameTextEditingController = TextEditingController();
  String _labelText;

  @override
  void initState() {
    super.initState();
    nameTextEditingController.addListener(_hasStartedTyping);
  }

  void _hasStartedTyping() {
    setState(() {
      if (nameTextEditingController.text.isNotEmpty) {
        _labelText = 'Name';
      } else {
        _labelText = null;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 25, vertical: 30),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                keyboardType: TextInputType.text,
                autofocus: false,
                textAlign: TextAlign.start,
//                onChanged: (v){
//                  setState(() {
//                    if(v.isNotEmpty){
//                      _labelText = 'Name';
//                    }else{
//                      _labelText = null;
//                    }
//                  });
//
//                },
                textInputAction: TextInputAction.done,
                controller: nameTextEditingController,
                style: TextStyle(
                    color: Colors.black87,
                    fontSize: 18,
                    fontWeight: FontWeight.w500),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(vertical: 15),
                  labelText: _labelText,
                  hintText: 'Name',
                  hintStyle: TextStyle(
                      color: Colors.grey,
                      fontSize: 18,
                      fontWeight: FontWeight.w500),
                  labelStyle: TextStyle(
                      color: Colors.grey,
                      fontSize: 18,
                      fontWeight: FontWeight.w500),
                  focusedBorder: OutlineInputBorder(
                      borderSide:
                          BorderSide(color: Colors.transparent, width: 1)),
                ),
              ),
            ],
          )),
    );
  }
}

输出: