文本字段高于键盘

Question

我希望键盘向上推动文本字段，以便无需用户滚动即可看到完整的文本字段。尝试了 resizeToAvoidBottomInset: true 如Flutter TextFormField hidden by keyboard中所建议的@

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

下面是我从 Scaffold 开始的代码：

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

可能是因为浮动按钮停靠了？

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 以更好地了解此属性的作用。