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 )
问题描述
Description
描述
I am creating the login screen in which I have used the Stack widget, Currently, everything works fine but only one issue of the shrinking the view.我正在创建使用Stack小部件的登录屏幕，目前，一切正常，但只有缩小视图的一个问题。 When I use the resizeToAvoidBottomPadding: false inside the Scaffold then screen shrinking disappear but another problem arise that whole screen scroll not working, please check below lines of code当我在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),
),
)
],
),
),
],
));
}
}
From Above code, I am getting the following screen从上面的代码，我得到以下屏幕
I have used the ListView and SingleChildScrollView but it not working properly, please check my code with SingleChildScrollView , which i have tried我已经使用了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),
),
)
],
),
),
],
)),
));
}
}
And From the above code getting this result by using the SingleChildScrollView并从上面的代码通过使用SingleChildScrollView得到这个结果
Problem :- I want to scroll the whole screen when the keyboard appears , I have used all the Listview and SingleChildScrollView but not getting the solution, please help me on it.问题：-我想在键盘出现时滚动整个屏幕，我已经使用了所有Listview和SingleChildScrollView但没有得到解决方案，请帮助我。 Thanks谢谢
2 个解决方案
解决方案1
1 已采纳 2020-04-07 11:10:42
The problem is you're using Expanded widgets, you see expanded widgets are flexible in nature they will consume and shrink according to the available space.问题是您正在使用扩展小部件，您看到扩展小部件本质上是灵活的，它们会根据可用空间消耗和缩小。 If you don't want that you need to specify a height.如果您不想这样做，则需要指定高度。
https://i.imgur.com/wVgAUlN.mp4 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),
),
)
],
),
),
),
],
),
),
));
}
}
解决方案2
0 2020-04-08 12:47:43
Thanks @Nadeem by which problem has resolved Whenever we want to scroll the full screen when keyboard appear then we should not use the Expand widget for it.I was also doing the same mistake, for the other user i have modified the code for full scroll when keyboard appear, I have used the MediaQuery for it,Please check my below code of it.感谢@Nadeem 问题已解决 每当我们想在键盘出现时滚动全屏时，我们都不应该为它使用Expand小部件。我也犯了同样的错误，对于另一个用户，我修改了完整滚动的代码当键盘出现时，我已经使用了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,
),
),
)
],
),
),
),
);
}
}
Please check the output of it.请检查它的输出。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Flutter：出现键盘时向上滚动屏幕 - Flutter: Scroll the screen up when keyboard appears
Flutter：出现键盘时如何缩小图像或滚动到底部 - Flutter: How to shrink images or scroll to bottom when keyboard appears
Flutter - 如何在键盘出现时使用 SingleScrollView() 滚动整个屏幕，而不仅仅是自动显示文本 - Flutter - how to use SingleScrollView() to Scroll Entire Screen when Keyboard Appears not just text automatically
当用户向下滚动屏幕时如何使 Container() 缩小 - how to Make Container() shrink when user scroll down the screen
Flutter ListView Builder滚动整个屏幕 - Flutter ListView Builder scroll whole screen
Flutter：DraggableScrollableSheet 出现时覆盖整个屏幕 - Flutter: DraggableScrollableSheet covers the whole screen when it appears
出现键盘时颤振列表视图构建器不会缩小 - Flutter List view builder doesn't shrink when Keyboard appears
当我滚动视图时，颤动修复屏幕顶部的标签栏 - flutter fix tabbar in top of screen when i scroll the view
Flutter，如何在键盘打开时无缝滚动视图 - Flutter, How to seamlessly scroll the view when keyboard opened
Flutter 指针到达边缘时滚动屏幕 - Flutter scroll screen when pointer reaches edge
相关标签