flutter - 键盘出现时将文本字段滚动到视图中 Flutter
问题描述
我有这个登录页面,当我按下文本字段时,它应该是键盘的顶部,我尝试使用以下代码,但它没有锻炼,我尝试使用 singlechildview 仍然相同,listview 也没有工作我尝试使用删除堆栈并厌倦了容器,但它是一样的,现在我有这个代码,
Size size = MediaQuery.of(context).size;
return new Scaffold(
resizeToAvoidBottomInset: false,
body: new Stack(
children: <Widget>[
Center(
child: new Image.asset(
'assets/images/splash_bg.png',
width: size.width,
height: size.height,
fit: BoxFit.fill,
),
),
Center(
child: new Image.asset(
'assets/images/clublogo.png',
width: 150,
height: 150,
),
),
Center(
child: Padding(
padding: EdgeInsets.only(top: 250, left: 10, right: 10),
child: TextField(
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orangeAccent[200], width: 2.0),
borderRadius: const BorderRadius.all(
const Radius.circular(20.0),
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orangeAccent[200], width: 2.0),
borderRadius: const BorderRadius.all(
const Radius.circular(20.0),
),
),
contentPadding: EdgeInsets.all(5),
hintText: " Enter Mobile Number",
hintStyle: TextStyle(color: Colors.white, fontSize: 15),
suffixIcon: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.orangeAccent[200],
),
borderRadius: BorderRadius.all(
Radius.circular(20),
)),
child: FittedBox(
alignment: Alignment.center,
fit: BoxFit.fitHeight,
child: IconButton(
icon: Icon(MdiIcons.arrowRight),
iconSize: 33.0,
color: Colors.orangeAccent[200],
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
print("gfgfg");
},
),
),
),
),
),
),
),
],
),
);
解决方案
请粘贴下面的代码并根据您的小部件进行更改..
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 80),
child: FlutterLogo(
size: 200,
),
),
Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 10),
child: TextField(
controller: _emailController,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "Email",
labelText: "Enter Email",
),
keyboardType: TextInputType.emailAddress,
),
),
Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 10),
child: TextField(
controller: _passwordController,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "Password",
labelText: "Enter Password",
),
obscureText: true,
),
),
InkWell(
onTap: () {
_signIn();
},
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blueAccent, Colors.blue, Colors.black],
),
borderRadius: BorderRadius.circular(8)),
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
margin: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
width: MediaQuery.of(context).size.width,
child: Center(child: Text("Login with Email")),
),
),
],
),
),
),
);
}
推荐阅读
- regex - 如何匹配以字母数字字符开头且只有三个特殊字符的文件。_ -?
- php - 作曲家更新 => 致命错误:内存不足
- javascript - Firebase.auth 返回空变量
- node.js - linux 上的 angular 6 和 node.js 服务器
- regex - 使用正则表达式从一组字符 perl 中恰好一次
- css - 表内引导网格系统
- android - 工具栏重叠其他内容android
- apache-spark - Spark ML(使用 PySpark):使用多层感知器分类器时出错
- python - 由于源是数组,如何使用 Icontains 在 ListField 中搜索?
- angular - 使用 rest api 的 dialogflow v2 OAuth