SingleChildScrollView 不工作或我做错了什么
SingleChildScrollView is not working or I'm doing something wrong
当我必须键入键盘时,我有一个带有两个文本字段的登录页面隐藏了登录按钮和其他字段。
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Container(
child: SingleChildScrollView(
//color: Colors.white,
padding: EdgeInsets.only(top: 120.0, right: 48.0, left: 48.0, bottom: 20.0),
child: Column(
children: <Widget>[
new Image.asset('assets/images/login.png',height: 170, width: 170,),
SizedBox(height: 40.0,),
_input("Roll Number",_rollnumberController, false),
SizedBox(height: 20.0,),
_input("Phone Number",_phonenumberController, false),
SizedBox(height: 40.0,),
buildLogInButton(),
],
),
),
),
);
}
我已将解决方案更改为使用键盘可见性来决定何时向上或向下滚动。我正在使用一个名为 flutter_keyboard_visibility.
的包
我已经使用您的大部分代码编写了一个示例,但将您的特定输入和登录按钮替换为通用的:
导入
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
Class
ScrollController _scrollController = ScrollController();
FocusNode _focusNodePassword = FocusNode();
@override
void initState() {
KeyboardVisibilityNotification().addNewListener(
onChange: (bool visible) {
visible ? scrollToBottom() : scrollToTop();
},
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
controller: _scrollController,
padding: EdgeInsets.only(
top: 120.0, right: 48.0, left: 48.0, bottom: 20.0),
child: Column(
children: <Widget>[
Container(height: 170, width: 170, color: Colors.blue,),
SizedBox(height: 40.0,),
TextFormField(
decoration: InputDecoration(
labelText: 'Email'
),
onEditingComplete: () {
_focusNodePassword.requestFocus();
}
),
SizedBox(height: 20.0,),
TextFormField(
decoration: InputDecoration(
labelText: 'Password'
),
focusNode: _focusNodePassword,
onEditingComplete: () {
FocusScope.of(context).requestFocus(new FocusNode());
}
),
SizedBox(height: 40.0,),
RaisedButton(
child: Text('Login'),
onPressed: () {
_scrollController.animateTo(0,
duration: Duration(milliseconds: 200),
curve: ElasticOutCurve()
);
},
),
],
),
);
}
),
);
}
void scrollToTop() {
Timer(Duration(milliseconds: 50), (){
_scrollController.animateTo(0,
duration: Duration(milliseconds: 400),
curve: ElasticOutCurve()
);
});
}
void scrollToBottom() {
Timer(Duration(milliseconds: 50), (){
_scrollController.animateTo(2000,
duration: Duration(milliseconds: 400),
curve: ElasticOutCurve()
);
});
}
当我必须键入键盘时,我有一个带有两个文本字段的登录页面隐藏了登录按钮和其他字段。
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Container(
child: SingleChildScrollView(
//color: Colors.white,
padding: EdgeInsets.only(top: 120.0, right: 48.0, left: 48.0, bottom: 20.0),
child: Column(
children: <Widget>[
new Image.asset('assets/images/login.png',height: 170, width: 170,),
SizedBox(height: 40.0,),
_input("Roll Number",_rollnumberController, false),
SizedBox(height: 20.0,),
_input("Phone Number",_phonenumberController, false),
SizedBox(height: 40.0,),
buildLogInButton(),
],
),
),
),
);
}
我已将解决方案更改为使用键盘可见性来决定何时向上或向下滚动。我正在使用一个名为 flutter_keyboard_visibility.
的包我已经使用您的大部分代码编写了一个示例,但将您的特定输入和登录按钮替换为通用的:
导入
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
Class
ScrollController _scrollController = ScrollController();
FocusNode _focusNodePassword = FocusNode();
@override
void initState() {
KeyboardVisibilityNotification().addNewListener(
onChange: (bool visible) {
visible ? scrollToBottom() : scrollToTop();
},
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
controller: _scrollController,
padding: EdgeInsets.only(
top: 120.0, right: 48.0, left: 48.0, bottom: 20.0),
child: Column(
children: <Widget>[
Container(height: 170, width: 170, color: Colors.blue,),
SizedBox(height: 40.0,),
TextFormField(
decoration: InputDecoration(
labelText: 'Email'
),
onEditingComplete: () {
_focusNodePassword.requestFocus();
}
),
SizedBox(height: 20.0,),
TextFormField(
decoration: InputDecoration(
labelText: 'Password'
),
focusNode: _focusNodePassword,
onEditingComplete: () {
FocusScope.of(context).requestFocus(new FocusNode());
}
),
SizedBox(height: 40.0,),
RaisedButton(
child: Text('Login'),
onPressed: () {
_scrollController.animateTo(0,
duration: Duration(milliseconds: 200),
curve: ElasticOutCurve()
);
},
),
],
),
);
}
),
);
}
void scrollToTop() {
Timer(Duration(milliseconds: 50), (){
_scrollController.animateTo(0,
duration: Duration(milliseconds: 400),
curve: ElasticOutCurve()
);
});
}
void scrollToBottom() {
Timer(Duration(milliseconds: 50), (){
_scrollController.animateTo(2000,
duration: Duration(milliseconds: 400),
curve: ElasticOutCurve()
);
});
}