英文:
Expand component to page limit without scroll
问题
我有这个屏幕，但我想扩展白色部分到用户屏幕的底部限制，但我没有成功，它有一个蓝色的部分，如图所示。
请记住，我想使这个页面响应式，不管用户的屏幕大小如何，它都必须到达底部。
这是我的代码：
Scaffold(
backgroundColor: Colors.blue,
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(top: 26.h, bottom: 160.h),
child: Container(),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 24.w),
alignment: Alignment.topCenter,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.r),
topRight: Radius.circular(8.r),
),
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(height: 32.h),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Thanks for returning',
style: TextStyle(
fontSize: 16.sp,
color: Colors.blueGrey,
fontWeight: FontWeight.w900,
)),
SizedBox(
height: 8.h,
),
Text(
'Enter your password to login into your account: ',
softWrap: true,
style: TextStyle(
fontSize: 22.sp,
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
],
),
SizedBox(height: 24.h),
Form(
key: _userCredentialsForm,
autovalidateMode:
AutovalidateMode.onUserInteraction,
child: Column(
children: [
PSInputText(
controller: _passwordController,
inputColor: Colors.blue,
title: 'Password',
hintText: AuthStrings.password,
keyboardType: TextInputType.number,
maxLength: 6,
isObscureText: true,
textInputAction: TextInputAction.done,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
],
onChanged: (value) {},
),
],
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(top: 10.h),
child: PSPrimaryTextButton(
fontSize: 14,
text: 'Forgot password',
onPressed: () => controller.add(
ForgotPasswordEvent(),
),
),
),
SizedBox(height: 40.h),
SizedBox(
height: 40.h,
child: PSLoginButton(
text: 'Log in',
onPressed: () {},
),
),
],
),
Padding(
padding: EdgeInsets.only(bottom: 8.h, top: 32.h),
child: FutureBuilder(
initialData: '-',
future: AppConfig.appVersion,
builder: (ctx, appVersion) =>
Text('App Version ${appVersion.data}',
style: TextStyles.fontSize12(
color: Colors.black,
)),
),
),
],
),
),
],
),
],
),
),
],
),
);
我已经尝试过在列中使用Expanded，还尝试过使用Positioned.fill，但它们都导致布局错误，唯一的解决方案是在容器底部放置一个SizedBox以将其与子元素一起推到底部，但这不是我想要的行为，因为它为用户提供了滚动！
英文:
I have this screen, but the white part I would like to expand it to the bottom limit of the user's screen, but I am not getting it, it has a part in blue as shown in the image.
Remembering that I would like to make this page responsive regardless of the user's screen size, it has to go to the end
This is my code:
Scaffold(
backgroundColor: Colors.blue,
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(top: 26.h, bottom: 160.h),
child: Container(),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 24.w),
alignment: Alignment.topCenter,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.r),
topRight: Radius.circular(8.r),
),
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(height: 32.h),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Thanks for returning',
style: TextStyle(
fontSize: 16.sp,
color: Colors.blueGrey,
fontWeight: FontWeight.w900,
)),
SizedBox(
height: 8.h,
),
Text(
'Enter your password to login into your account: ',
softWrap: true,
style: TextStyle(
fontSize: 22.sp,
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
],
),
SizedBox(height: 24.h),
Form(
key: _userCredentialsForm,
autovalidateMode:
AutovalidateMode.onUserInteraction,
child: Column(
children: [
PSInputText(
controller: _passwordController,
inputColor: Colors.blue,
title: 'Password',
hintText: AuthStrings.password,
keyboardType: TextInputType.number,
maxLength: 6,
isObscureText: true,
textInputAction: TextInputAction.done,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
],
onChanged: (value) {},
),
],
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(top: 10.h),
child: PSPrimaryTextButton(
fontSize: 14,
text: 'Forgot password',
onPressed: () => controller.add(
ForgotPasswordEvent(),
),
),
),
SizedBox(height: 40.h),
SizedBox(
height: 40.h,
child: PSLoginButton(
text: 'Log in',
onPressed: () {},
),
),
],
),
Padding(
padding: EdgeInsets.only(bottom: 8.h, top: 32.h),
child: FutureBuilder(
initialData: '-',
future: AppConfig.appVersion,
builder: (ctx, appVersion) =>
Text('App Version ${appVersion.data}',
style: TextStyles.fontSize12(
color: Colors.black,
)),
),
),
],
),
),
],
),
],
),
),
],
),
);
I already tried to use the expand inside column, i also tried to use positioned.fill.
But they all give layout errors, the only solution was to place a sized box to lower the container to the end with its children, but this is not the behavior I would like, since it has a scroll for the user!
答案1
得分: 0
我认为你想把登录按钮放在页面底部。根据屏幕高度，你可以增加忘记密码按钮的内边距。
Padding(
padding: EdgeInsets.only(top: MediaQuery.of(context).size.height - 450),
child: PSPrimaryTextButton(
fontSize: 14,
text: '忘记密码',
onPressed: () => controller.add(
ForgotPasswordEvent(),
),
),
),
在这个代码块中，我通过从设备高度减去 450 来添加内边距。
由于高度无限，Expanded 不起作用。它不能帮助我们。
英文:
I think you want to put the Login button to bottom of the page. You can increase the padding of forgot password button according to the screen height.
Padding(
padding: EdgeInsets.only(top: MediaQuery.of(context).size.height - 450,),
child: PSPrimaryTextButton(
fontSize: 14,
text: 'Forgot password',
onPressed: () => controller.add(
ForgotPasswordEvent(),
),
),
),
In this code block I add padding with subtracting 450 from height of device.
Expanded won't work because we have unlimited height. It can't help us.
答案2
得分: 0
你可以移除第一列并替换为Align
Align(
alignment: Alignment.bottomCenter,
child: Column(
// 其他内容...
),
),
这是更改的要点
https://dartpad.dev/?id=66d3ec6382c544939750609d558d63f8
英文:
You can remove the first column and replace it with Align
Align(
alignment: Alignment.bottomCenter,
child: Column(
....
),
),
Here is a gist of the change
https://dartpad.dev/?id=66d3ec6382c544939750609d558d63f8
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论