flutter TextField标签边框位置

vuktfyat  于 2023-04-22  发布在  Flutter
关注(0)|答案(3)|浏览(121)

我做了几个文本字段的形式。我需要有一个标签以上的每个字段显示。我不想有点击字段显示每个字段上方的文本。他们需要得到修复。
使用标签文本,标签只显示当用户在字段中单击,我需要得到修复。
我试过:

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

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

7cjasjjr

7cjasjjr1#

你可以像这样使用TextFormField

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

lp0sw83n2#

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

          border: OutlineInputBorder(),

        ));
  }

你可以通过hinttext得到答案。

rseugnpd

rseugnpd3#

我也是新的Flutter。我只是建议另一种方法可能做到这一点。
我使用了一个Stack来允许标签(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 
                    )
                  ],
                )),
          ]),
        ));
  }
}

相关问题