如何滚动屏幕而不缩小堆栈视图上的屏幕？（出现键盘时滚动整个屏幕）
问题描述 投票：1回答：1
Description我正在创建登录屏幕，在其中使用了堆栈视图，目前，一切正常，但是只有一个缩小视图的问题。当我在resizeToAvoidBottomPadding: false内使用Scaffold时，屏幕缩小消失了，但另一个问题是整个屏幕滚动无法正常工作，请检查下面的代码行
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
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，但没有找到解决方法，请帮助我。谢谢
1个回答
1
投票
投票
问题是您正在使用扩展窗口小部件，您会看到扩展窗口小部件本质上是灵活的，它们会根据可用空间消耗和缩小。如果您不想，则需要指定高度。
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),
),
)
],
),
),
),
],
),
),
));
}
}
最新问题
- 查找字符串中最大的 #
- 如何在 Dockerfile 中将 Root 用户更改为自定义用户
- 在包含目录中找不到 Visual Studio Code 包含文件 (Windows 10)
- 我在我的角度项目中收到错误“ReferenceError：localStorage 未定义”
- 使用 terraform 将 AWS RDS aurora 从无服务器 v1 升级到无服务器 v2
- 无法连接到在尤里卡服务器中注册的docker化服务
- Networkx ValueError：没有一个不能成为节点
- 通过时间和空间匹配从栅格中提取点
- 运行时错误：应用程序注册表尚未准备好
- 签名板（画布）到 Google 表格
- 使用带有凭据的 Fetch 的跨源 AJAX 请求：'include' 和使用 SameSite=None 设置的 cookie 在 Firefox 中不会发送
- Azure 应用程序服务（UAMI）上的 Spring Cloud Vault：连接超时
- 如何在 livewire 中将 $errors->all()) 绑定到我的 volt 类？
- flex 容器在选项卡内容页面中不起作用
- 我可以在初始备份/恢复阶段初始化副本服务器而不锁定主服务器吗？
- 通过反射创建扩展类
- 哪个部分被认为是响应的“解析”，另一个补充部分叫什么？
- 如何将socket.id设置为HTTP cookie？
- 在策略中注入 Illuminate\Http\Request 实例
- 使用 NRT 注释时类型参数为结构体时泛型类型的 C# 语言规范
© www.soinside.com 2019 - 2024. All rights reserved.