Положение границы метки TextField

Question

Я делаю форму с несколькими текстовыми полями. Мне нужно иметь метку над каждым отображаемым полем. Я не хочу, чтобы мне приходилось щелкать в поле, чтобы отображать текст над каждым полем. Их нужно исправить.

Используя текст метки, метка отображается только тогда, когда пользователь щелкает в поле, мне нужно это исправить.

Я попытался:

static TextField user_name() {
            return TextField(
                maxLines: 2,
                decoration: InputDecoration(
                  labelText: 'Full Name',
                  border: OutlineInputBorder(),          
                ));
}

Но "Полное имя" отображается только тогда, когда пользователь нажимает на поле.

Answer 1

Я тоже новичок в трепете. Я просто предлагаю другой подход, который может сделать это.

Я использовал стек, чтобы метка (текст) закрывала текстовое поле. Но возникает проблема после того, как цвет текста не изменится после того, как я сфокусирую TextField. Затем я использую FocusNode для прослушивания изменения фокуса и вызываю setState для обновления.

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = new FocusNode();

  @override
  void initState() {
    super.initState();
    //Add Listener to know when is updated focus
    _focusNode.addListener(_onLoginUserNameFocusChange);
  }

  @override
  void dispose() {
    //Dispose Listener to know when is updated focus
    _focusNode.addListener(_onLoginUserNameFocusChange);
    super.dispose();
  }

  void _onLoginUserNameFocusChange() {
    //Force updated once if focus changed
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(children: <Widget>[

            //original one, just to check the style
            Padding(
                padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                child: TextField(
                    maxLines: 2,
                    decoration: InputDecoration(
                      labelText: 'Full Name',
                      border: OutlineInputBorder(),
                    ))),

            //The 5,5,5,5 padding just for easier look, you can start from the Stack
            Padding(
                padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                child: Stack( //try to allow drawing label Text over the container
                  children: <Widget>[
                    Padding(
                      // this padding is to allow the Text draw on the top of the border
                      //since default font size is 12, half of it
                        padding: EdgeInsets.fromLTRB(0, 6, 0, 0),
                        child: TextField(// the main TextField
                          maxLines: 2,
                          decoration: InputDecoration(
                            border: OutlineInputBorder(),
                          ),
                          //This is used to listen the focus of this TextField
                          focusNode: _focusNode,
                        )),
                    Container(
                      //position label
                      margin: EdgeInsets.fromLTRB(7, 0, 0, 0),
                      padding: EdgeInsets.fromLTRB(4, 0, 4, 0), // input outline default seems using 4.0 as padding from their source
                      child: Text(
                        'Full Name',
                        style: TextStyle(
                          fontSize: 12,
                          color: _focusNode.hasFocus ? Colors.blue : Colors.grey,
                        ),
                      ),
                      color: Colors.white, //just to cover the intercepted border 
                    )
                  ],
                )),
          ]),
        ));
  }
}

Answer 2

Вы могли бы использовать TextFormFied вот так:

TextFormField(
  decoration: InputDecoration(
    floatingLabelBehavior:FloatingLabelBehavior.always,
  ),
);

Answer 3

 static TextField user_name(){
    return TextField(
        maxLines: 2,
        decoration: InputDecoration(
        // lableText:"Full name",
          hintText:'Full name',

          border: OutlineInputBorder(),

        ));
  }

Вы можете получить ответ через текст-подсказку.