Question

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

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

我尝试过：

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

但仅在用户单击字段时显示“全名”。

Answer 1

您可以像这样使用TextFormFied：

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

Answer 2

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

          border: OutlineInputBorder(),

        ));
  }

您可以通过提示文本获得答案。

Answer 3

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

我使用堆栈来允许label（Text）覆盖TextField。但是之后出现问题，因为在聚焦TextField之后，Text颜色不会改变。然后，我使用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 
                    )
                  ],
                )),
          ]),
        ));
  }
}

TextField标签边框位置

3 个答案: