文本域高于键盘

Question

我希望键盘将文本字段向上推，以便用户无需滚动即可看到完整的文本字段。按照

中的建议尝试了 resizeToAvoidBottomInset: true

但是，当文本字段处于焦点时，键盘仍然隐藏文本字段。

下面是我从脚手架开始的代码：

Scaffold(
      resizeToAvoidBottomInset: true,
      floatingActionButton: Container(
        height: height * 0.054,
        width: width * 0.885,
        child: FloatingActionButton.extended(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(9.0))),
          isExtended: true,
          backgroundColor: Colos.blue,
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          onPressed: () {
          },
          label: Text('SEND',
              style: TextStyle(
                  color: Colors.white
                  fontWeight: FontWeight.bold,
                  letterSpacing: 2.1,
                  fontSize: 13.5)),
        ),
      ),
      extendBody: true,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: IconButton(
          icon: Icon(Icons.chevron_left,
              size: 21, color: Colors.white
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => TestingHomePage()),
            );
          },
        ),
        centerTitle: true,
        title: Text('Textfield',
            style: TextStyle(
                color: Colors.white
                fontWeight: FontWeight.bold,
                fontSize: 18)),
      ),
      backgroundColor: Colors.black,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: height * 0.015),
              child: Container(
                margin: EdgeInsets.symmetric(
                  horizontal: width * 0.045,
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                  color: Colors.red,
                ),
                child: Widget
                             
brackets

            Padding(
              padding: EdgeInsets.symmetric(
                  horizontal: width * 0.06, vertical: height * 0.02),
              child: TextField(
                style: TextStyle(color: Colors.white),
                maxLines: maxLines,
                autofocus: false,
                decoration: InputDecoration(
                  decoration...
                ),
                onChanged: (text) {
                  print("First text field: $text");

              brackets

会不会是因为floatingactionbutton停靠了？

Answer 1

这里的问题是文本字段在滚动视图中。

遵循此层次结构：

Scaffold(
  body: SafeArea(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [ ... ] // Put your scroll view elements here.
            ),
          )
        ),
        // Put your text field outside the scroll view.
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(),
        ),
      ],
    ),
  ),
);

这样，无论何时屏幕尺寸发生变化，滚动视图都会因展开的小部件而缩小，而 TextField 会保持固定在底部并随键盘向上移动。

此外，尝试设置 resizeToAvoidBottomInset: false/true 在进行更改后更好地理解此属性的作用。

文本域高于键盘

Textfield rises above keyboard

textfield

flutter