Flutter TextField 溢出键盘底部向上

时间:2020-12-31 09:09:53

标签: flutter listview gridview overflow textfield

问题来了: 我有一个网格(填字游戏)和它下面的问题列表。我需要从网格中独立滚动的问题列表。当我点击网格输入答案并且键盘出现时,我收到溢出错误并且网格不会移动,因此我用来输入答案的焦点文本字段不可见(如果它在网格上足够低以被键盘盖住)。 我尝试了 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
            ]
        ),
      ),
    );
  }

不幸的是,我还不允许发布图片......没有足够的声誉......请,任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:0)

将您的 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?'),
    
  ],
)
 )

答案 1 :(得分:0)

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