Flutter TextField在键盘上溢出底部

Posted 2023-02-23

【中文标题】Flutter TextField在键盘上溢出底部

【英文标题】：Flutter TextField overflow bottom on keyboard up

【发布时间】：2021-04-07 15:46:50

【问题描述】：

这就是问题所在： 我有一个网格（填字游戏）和下面的问题列表。我需要问题列表从网格中独立滚动。当我单击网格输入答案并且键盘出现时，我收到溢出错误并且网格没有移动，因此我用来输入答案的焦点文本字段不可见（如果它在网格上足够低以被键盘覆盖）。 我尝试了 ListView 和 Expanded 小部件的各种组合...没有解决方案...我不能使用 resizeToAvoidBottomInset: false 因为我需要网格向上移动并保持聚焦的 TextField 可见。 代码如下：

Widget build(BuildContext context) 
    return Scaffold(
     appBar: AppBar(
        title: Text(widget.title),
        ),
      body: Column(
        children:[
          FutureBuilder(
          future: grid,
          builder: (context, snapshot) 
            if (snapshot.hasData) 
              return  Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                    width: MediaQuery.of(context).size.width-8,
                    margin: EdgeInsets.zero,
                    padding: EdgeInsets.zero,
                    child: GridView.count(
                      padding: EdgeInsets.only(left:0.0,top:5.0,right:0.0,bottom: 0.0),
                      shrinkWrap: true,
                      crossAxisCount: 15,
                      mainAxisSpacing: 2,
                      crossAxisSpacing: 2,
                      children: List.generate(snapshot.data.length, (index) 
                        if(gridFilled.length < snapshot.data.length) 
                          gridFilled.add(snapshot.data[index]);
                        
                        return FocusScope(
                            node: _node,
                            child: Container(
                              decoration: BoxDecoration(
                                  color: snapshot.data[index] == "#" ? Colors.black : Colors.white,
                                  border: Border.all(color: Colors.black)),
                              child:
                              snapshot.data[index] == "#"
                                  ? Text('#')
                                  : _isTextField(gridFilled[index], index),
                            ));
                      ),
                    ),
                  ),
              );
             else if (snapshot.hasError) 
              return Text("$snapshot.error");
            
            return CircularProgressIndicator();
          ,
        ),
          SizedBox(width: MediaQuery.of(context).size.width, height: 15.0,),
          Expanded(
            child: QPanel(dir: widget.dir, dbName: widget.xwordnumber),//this is a ListView with the questions
            ),
      ]),
      drawer: Drawer(
        child: ListView(
            padding: EdgeInsets.zero,
            children:<Widget>[
              //just menu items
            ]
        ),
      ),
    );
  

很遗憾，我还不能发布图片……声誉不够……请提供任何帮助！

【参考方案1】：

将您的 Column 包装在 SingleChildScrollView 中。

例如：

SingleChildScrollView(
    child:Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.start,

  children: <Widget>[
    Text('We move under cover and we move as one'),
    Text('Through the night, we have one shot to live another day'),
    Text('We cannot let a stray gunshot give us away'),
    Text('We will fight up close, seize the moment and stay in it'),
    Text('It’s either that or meet the business end of a bayonet'),
    Text('The code word is ‘Rochambeau,’ dig me?'),
    
  ],
)
 )

【讨论】：

感谢您的回答。要使用 SingleChildScrollView 包装 Column，我还必须使用 Flexible (FitFlex.loose) 更改 Expanded 并将 Column 的 MainAxisSize 设置为 min ...问题是 问题列表不滚动没有了...

...网格被键盘推上去后没有回到起始位置...

【参考方案2】：

您可以将整个列包装在 SingleChildScrollView() 中