TextField标签边框位置 [英] TextField label border position

问题描述

我正在制作一个包含多个文本字段的表单.我需要在每个字段上方显示一个标签.我不想单击该字段以在每个字段上方显示文本.它们需要修复.

I am making a form with several text fields. I need to have a label above each field displayed.I don't want to have to click in the field to show the text above each field. They need to be fixed.

使用标签文本，仅在用户单击字段时显示标签，我需要对其进行修复.

Using label text, the label only shows when the user clicks in the field, I need that to be fixed.

我尝试过:

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

但仅在用户单击字段时显示全名".

But only shows 'Full Name' when the user clicks on the field.

推荐答案

我也是新手.我只是建议另一种方法可以做到这一点.

I am also new to flutter. I just suggest another approach may possible do that.

我使用了一个堆栈来允许label(Text)覆盖TextField. 但是之后出现了一个问题，因为在聚焦TextField之后，Text颜色不会改变.然后，我使用FocusNode来监听焦点更改并调用setState进行更新.

I used a Stack to allow the label(Text) to cover the TextField. But there is a problem after as the Text color will not change after I focus the TextField. Then I use the FocusNode to listen the focus change and call setState to update.

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 
                    )
                  ],
                )),
          ]),
        ));
  }
}

这篇关于TextField标签边框位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！