键盘上方的Flutter / Dart滚动文本字段 [英] Flutter/Dart Scrolling textfield above keyboard
问题描述
我正在使用文本字段,如何使其在输入电子邮件和密码时会向上滚动?
I am using textfields, how can I make it so it scrolls up a bit when entering email and password?
以下是代码的预览
blank
推荐答案
好吧,您粘贴的代码不完整,所以我猜您是在Column中包含了这些文本字段。您有两个选择:
1st)在脚手架中,您可以将此属性设置为false,例如 resizeToAvoidBottomInset:false,
2o )您可以使用 SingleChildScrollView ,当出现键盘时,该文本将在文本字段中上移,例如:
Ok first, the code you pasted is incomplete, so I'm guessing you are having those textfields insides a Column. You have two options:
1st) In your Scaffold you can set this property to false like resizeToAvoidBottomInset: false,
2o) You can use a SingleChildScrollView that will move up your textfield when the keyboard appears eg.:
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SingleChildScrollView(
child: MyLoginPage(title: 'Flutter Demo Home Page'),
),
),
);
}
}
class MyLoginPage extends StatefulWidget {
MyLoginPage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyLoginPageState createState() => _MyLoginPageState();
}
class _MyLoginPageState extends State<MyLoginPage> {
String _email;
String _password;
TextStyle style = TextStyle(fontSize: 25.0);
@override
Widget build(BuildContext context) {
final emailField = TextField(
obscureText: false,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Icon(FontAwesomeIcons.solidEnvelope),
hintText: "Email",
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red[300], width: 32.0),
borderRadius: BorderRadius.circular(97.0))),
onChanged: (value) {
setState(() {
_email = value;
});
},
);
final passwordField = TextField(
obscureText: true,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Icon(FontAwesomeIcons.key),
hintText: "Password",
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red[300], width: 32.0),
borderRadius: BorderRadius.circular(25.0))),
onChanged: (value) {
setState(() {
_password = value;
});
},
);
return Center(
child: Column(
children: <Widget>[
Container(
color: Colors.yellow[300],
height: 300.0,
),
emailField,
passwordField
],
),
);
}
}
只需复制并粘贴代码,看看是否您想要什么。
希望获得帮助。
Just copy and paste the code, and see if it's what you want.
Hope this help.
这篇关于键盘上方的Flutter / Dart滚动文本字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!