Flutter 键盘一直隐藏文本字段并显示溢出像素
Posted
技术标签:
【中文标题】Flutter 键盘一直隐藏文本字段并显示溢出像素【英文标题】：Flutter keyboard keeps hiding the text field and showing overflow pixels 【发布时间】：2021-06-27 05:14:15 【问题描述】：我正在处理一个实时聊天屏幕，我得到的结果在下面的两张图片中
BEFORE i click the textfield
AFTER i click the textfield
我尝试了许多不同的解决方案，但没有好的结果，包括添加 “resizeToAvoidBottomInset：true”到我的脚手架，我需要用户能够像正常聊天一样同时看到文本字段和键盘，我相信 UI 会自行调整大小或其他东西，我不知道我哪里出错了在这里，我的完整代码如下供审查
import 'package:flutter/material.dart';
import 'package:flutter_bounce/flutter_bounce.dart';
import 'dart:async';
import './login.dart';
import 'package:page_transition/page_transition.dart';
import './settings2.dart';
class SettingsScreen extends StatefulWidget
final String content;
SettingsScreen(
this.content,
);
@override
Settings createState() => Settings(content: content);
class Settings extends State<SettingsScreen>
final String content;
Settings(
this.content,
);
@override
void initState()
super.initState();
@override
Widget build(BuildContext context)
return Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Color(0xff000000),
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
content == 'livechat'? Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: MediaQuery.of(context).size.width *
2.5 /
100),
Bounce(
duration: Duration(milliseconds: 110),
onPressed: ()
Navigator.of(context).pop();
,
child: Container(
child: Text("Minimize",
style: TextStyle(
color: Color(0xffffffff),
fontFamily: 'Montserrat',
fontSize: MediaQuery.of(context)
.size
.height *
2 /
100,
fontWeight: FontWeight.w400)))),
Spacer(),
Bounce(
duration: Duration(milliseconds: 110),
onPressed: ()
Navigator.of(context).pop();
,
child: Container(
child: Text("Close",
style: TextStyle(
color: Color(0xffffffff),
fontFamily: 'Montserrat',
fontSize: MediaQuery.of(context)
.size
.height *
2 /
100,
fontWeight: FontWeight.w400)))),
SizedBox(
width: MediaQuery.of(context).size.width *
2.5 /
100)
])),
SizedBox(
height:
MediaQuery.of(context).size.height * 5 / 100),
Container(
height:
MediaQuery.of(context).size.height * 6 / 100,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
// <--- left side
color: Color(0xff333333),
width: 1.0,
),
top: BorderSide(
// <--- left side
color: Color(0xff333333),
width: 1.0,
),
)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width:
MediaQuery.of(context).size.width *
2.5 /
100),
Container(
child: Text("Connnected to Chat",
style: TextStyle(
color: Color(0xffffffff),
fontFamily: 'Montserrat',
fontSize: MediaQuery.of(context)
.size
.height *
1.7 /
100,
fontWeight: FontWeight.w400))),
])),
SizedBox(
height:
MediaQuery.of(context).size.height * 1 / 100),
Stack(
//alignment:new Alignment(x, y)
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height *
67 /
100,
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
height: MediaQuery.of(context)
.size
.height *
6 /
100,
width: MediaQuery.of(context)
.size
.width,
decoration: BoxDecoration(),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width: MediaQuery.of(
context)
.size
.width *
2.5 /
100),
Container(
width:
MediaQuery.of(context)
.size
.width *
90 /
100,
child: Text(
"Support : Hi there, how can we help?",
style: TextStyle(
color: Color(
0xffffffff),
fontFamily:
'Montserrat',
fontSize: MediaQuery.of(
context)
.size
.height *
1.7 /
100,
fontWeight:
FontWeight
.w400))),
]))
]))
]),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color(0xff131313),
),
height: MediaQuery.of(context).size.height *
6 /
100,
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: 15,
style: TextStyle(
fontSize: MediaQuery.of(context)
.size
.height *
1.5 /
100,
color: Color(0xffa6a6a6)),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(
MediaQuery.of(context)
.size
.height *
2.1 /
100),
border: InputBorder.none,
hintText: 'Type your Message here',
hintStyle: TextStyle(
fontSize: MediaQuery.of(context)
.size
.height *
1.9 /
100,
color: Color(0xffa6a6a6))),
)),
SizedBox(
height: MediaQuery.of(context).size.height *
2 /
100),
Container(
height: MediaQuery.of(context).size.height *
6 /
100,
width: MediaQuery.of(context).size.width *
95 /
100,
child: ElevatedButton(
onPressed: ()
// Respond to button press
,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Text("Send",
style: TextStyle(
color: Color(0xffffffff),
fontFamily: 'Montserrat',
fontSize:
MediaQuery.of(context)
.size
.height *
1.4 /
100,
fontWeight:
FontWeight.w600))
]),
))
])
]))
: Container()
])));
【问题讨论】：
应该是resizeToAvoidBottomInset: false。
这能回答你的问题吗？ When the keyboard appears, the Flutter widgets resize. How to prevent this?
【参考方案1】：
尝试添加 SingleChildScrollView，
SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
【讨论】：
以上是关于Flutter 键盘一直隐藏文本字段并显示溢出像素的主要内容，如果未能解决你的问题，请参考以下文章