Flutter :- 如何在不缩小 Stack 视图屏幕的情况下滚动屏幕？（出现键盘时滚动整个屏幕）
Flutter :- How to scroll the sceen without shrink the screen on the Stack view?(Scroll the the whole screen when the keyboard appears )
描述
我正在创建使用 Stack 小部件的登录屏幕，目前，一切正常，但只有一个问题缩小视野。当我在 Scaffold 中使用 resizeToAvoidBottomPadding: false 时，屏幕缩小消失了，但出现了另一个问题，整个屏幕滚动不起作用，请检查下面的代码行
class _LoginScreen extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Column(
children: <Widget>[
Expanded(
flex: 9,
child: Container(
color: Colors.blue,
child: Align(
alignment: Alignment.centerLeft,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style: TextStyle(
fontSize: 30.0,
color: Colors.white),
),
),
),
),
)),
),
Expanded(
flex: 1,
child: Container(
color: Colors.white,
),
)
],
)),
Expanded(
flex: 6,
child: Container(
color: Colors.white,
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(10),
],
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
inputFormatters: [
LengthLimitingTextInputFormatter(16),
],
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
],
));
}
}
从上面的代码，我得到以下屏幕
我已经使用了 ListView 和 SingleChildScrollView 但它无法正常工作，请使用 SingleChildScrollView 检查我的代码，我已经尝试过
class _LoginScreen extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
child: IntrinsicHeight(
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Column(
children: <Widget>[
Expanded(
flex: 9,
child: Container(
color: Colors.blue,
child: Align(
alignment: Alignment.centerLeft,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style: TextStyle(
fontSize: 30.0,
color: Colors.white),
),
),
),
),
)),
),
Expanded(
flex: 1,
child: Container(
color: Colors.white,
),
)
],
)),
Expanded(
flex: 6,
child: Container(
color: Colors.white,
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(10),
],
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
inputFormatters: [
LengthLimitingTextInputFormatter(16),
],
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
],
)),
));
}
}
并且从上面的代码中使用 SingleChildScrollView
得到这个结果
问题:- 我想在键盘出现时滚动整个屏幕,我已经用完了Listview和 SingleChildScrollView 但没有得到解决方案，请帮助我。谢谢
问题是您使用的是扩展小部件，您看到扩展小部件本质上是灵活的，它们会根据可用 space 消耗和收缩。如果你不想，你需要指定一个高度。
https://i.imgur.com/wVgAUlN.mp4
class StacScroll extends StatefulWidget {
StacScroll({Key key}) : super(key: key);
@override
_StacScrollState createState() => _StacScrollState();
}
class _StacScrollState extends State<StacScroll> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: Container(
height: double.infinity,
width: double.infinity,
// margin:
// EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style:
TextStyle(fontSize: 30.0, color: Colors.white),
),
),
)),
),
Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3),
child: Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(
fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
),
],
),
),
));
}
}
感谢@Nadeem 问题已解决
每当我们想在键盘出现时滚动全屏时，我们应该 而不是 使用 Expand 小部件，因为 it.I 也犯了同样的错误，对于其他用户我已经修改了键盘出现时全滚动的代码，我已经使用了MediaQuery，请检查我下面的代码。
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _LoginScreen();
}
}
class _LoginScreen extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Login"),
),
body: Container(
height: double.infinity,
width: double.infinity,
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height * 0.3,
),
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height * 0.59,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3),
child: Container(
margin: EdgeInsets.only(top: 70.0),
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Enter your username')),
TextFormField(
decoration: InputDecoration(labelText: 'Password')),
SizedBox(
height: 20.0,
),
RaisedButton(
color: Colors.yellow,
child: Text("Submit",
style: TextStyle(color: Colors.blue)),
onPressed: () {},
)
],
),
)),
Center(
child: Card(
color: Colors.yellow,
elevation: 8,
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * .25),
child: Container(
child: Center(
child: Text(
"Radhe",
style: TextStyle(color: Colors.blue, fontSize: 20.0),
)),
height: MediaQuery.of(context).size.height * .1,
width: MediaQuery.of(context).size.width * .3,
),
),
)
],
),
),
),
);
}
}
请检查它的输出。
描述
我正在创建使用 Stack 小部件的登录屏幕，目前，一切正常，但只有一个问题缩小视野。当我在 Scaffold 中使用 resizeToAvoidBottomPadding: false 时，屏幕缩小消失了，但出现了另一个问题，整个屏幕滚动不起作用，请检查下面的代码行
class _LoginScreen extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Column(
children: <Widget>[
Expanded(
flex: 9,
child: Container(
color: Colors.blue,
child: Align(
alignment: Alignment.centerLeft,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style: TextStyle(
fontSize: 30.0,
color: Colors.white),
),
),
),
),
)),
),
Expanded(
flex: 1,
child: Container(
color: Colors.white,
),
)
],
)),
Expanded(
flex: 6,
child: Container(
color: Colors.white,
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(10),
],
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
inputFormatters: [
LengthLimitingTextInputFormatter(16),
],
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
],
));
}
}
从上面的代码，我得到以下屏幕
我已经使用了 ListView 和 SingleChildScrollView 但它无法正常工作，请使用 SingleChildScrollView 检查我的代码，我已经尝试过
class _LoginScreen extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
child: IntrinsicHeight(
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Column(
children: <Widget>[
Expanded(
flex: 9,
child: Container(
color: Colors.blue,
child: Align(
alignment: Alignment.centerLeft,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style: TextStyle(
fontSize: 30.0,
color: Colors.white),
),
),
),
),
)),
),
Expanded(
flex: 1,
child: Container(
color: Colors.white,
),
)
],
)),
Expanded(
flex: 6,
child: Container(
color: Colors.white,
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(10),
],
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
inputFormatters: [
LengthLimitingTextInputFormatter(16),
],
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
],
)),
));
}
}
并且从上面的代码中使用 SingleChildScrollView
问题:- 我想在键盘出现时滚动整个屏幕,我已经用完了Listview和 SingleChildScrollView 但没有得到解决方案，请帮助我。谢谢
问题是您使用的是扩展小部件，您看到扩展小部件本质上是灵活的，它们会根据可用 space 消耗和收缩。如果你不想，你需要指定一个高度。
https://i.imgur.com/wVgAUlN.mp4
class StacScroll extends StatefulWidget {
StacScroll({Key key}) : super(key: key);
@override
_StacScrollState createState() => _StacScrollState();
}
class _StacScrollState extends State<StacScroll> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: Container(
height: double.infinity,
width: double.infinity,
// margin:
// EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style:
TextStyle(fontSize: 30.0, color: Colors.white),
),
),
)),
),
Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3),
child: Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(
fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
),
],
),
),
));
}
}
感谢@Nadeem 问题已解决
每当我们想在键盘出现时滚动全屏时，我们应该 而不是 使用 Expand 小部件，因为 it.I 也犯了同样的错误，对于其他用户我已经修改了键盘出现时全滚动的代码，我已经使用了MediaQuery，请检查我下面的代码。
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _LoginScreen();
}
}
class _LoginScreen extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Login"),
),
body: Container(
height: double.infinity,
width: double.infinity,
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height * 0.3,
),
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height * 0.59,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3),
child: Container(
margin: EdgeInsets.only(top: 70.0),
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Enter your username')),
TextFormField(
decoration: InputDecoration(labelText: 'Password')),
SizedBox(
height: 20.0,
),
RaisedButton(
color: Colors.yellow,
child: Text("Submit",
style: TextStyle(color: Colors.blue)),
onPressed: () {},
)
],
),
)),
Center(
child: Card(
color: Colors.yellow,
elevation: 8,
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * .25),
child: Container(
child: Center(
child: Text(
"Radhe",
style: TextStyle(color: Colors.blue, fontSize: 20.0),
)),
height: MediaQuery.of(context).size.height * .1,
width: MediaQuery.of(context).size.width * .3,
),
),
)
],
),
),
),
);
}
}
请检查它的输出。