dart 将组件展开到不滚动的页数限制

qnakjoqk  于 2023-06-19  发布在  其他
关注(0)|答案(2)|浏览(104)

我有这个屏幕,但白色的部分,我想扩大到用户的屏幕的底部限制,但我没有得到它,它有一个蓝色的一部分,如图所示.
Page that is in error
记住我想让这个页面响应不管用户的屏幕大小,它必须走到最后
这是我的代码:

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,
                                      )),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );

我已经尝试过使用expand inside列,我还尝试过使用positioned. fill。
但他们都给予布局错误,唯一的解决方案是放置一个大小的框,以降低容器的结束与它的孩子,但这不是我想要的行为,因为它有一个滚动的用户!

xmakbtuz

xmakbtuz1#

您可以删除第一列并将其替换为“对齐”

Align(
  alignment: Alignment.bottomCenter,
  child:  Column(
     ....
  ),
),

以下是更改https://dartpad.dev/?id=66d3ec6382c544939750609d558d63f8的要点

svmlkihl

svmlkihl2#

我想你想把登录按钮放在页面的底部。您可以根据屏幕高度增加忘记密码按钮的填充。

Padding(
  padding: EdgeInsets.only(top: MediaQuery.of(context).size.height - 450,),
  child: PSPrimaryTextButton(
    fontSize: 14,
    text: 'Forgot password',
    onPressed: () => controller.add(
      ForgotPasswordEvent(),
    ),
  ),
),

在这个代码块中,我添加了填充,并从设备的高度减去450。
膨胀是行不通的,因为我们有无限的高度。它帮不了我们。

相关问题