在SingleChildScrollView内垂直居中放置内容,最小高度为屏幕高度

问题描述

我正在尝试创建一个包含可滚动列的Web布局,该列具有屏幕高度的最小高度,但是如果内容太大,则可以扩展到屏幕高度以上。我已经能够创建滚动容器,但是在使整个部分可滚动的同时却无法使主要内容垂直居中。我无法获得的唯一可正常使用的版本无法使内容垂直居中,我必须在其上方添加一个SizedBox来创建填充以使其看起来居中,但随后它对不同的高度没有响应。

内容的父项如下:

Container(
   width: MediaQuery.of(context).size.width / 2,height: double.infinity,padding: const EdgeInsets.fromLTRB(100,30,100,0),child: SingleChildScrollView(
      child: Column(
         children: [
           LoginLayout(),SizedBox(height: 30),],),

然后简化内容列,基本上是这样的:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: [
    Padding(
      padding: const EdgeInsets.symmetric(vertical: 30),child: Image.asset(
        'assets/images/2.0x/logo-full.png',width: 125,fit: BoxFit.contain,// This column needs to be vertically centered if fits in the screen height
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,children: [
        Text('Welcome Back!',style: _textTheme.headline2),SizedBox(height: 10),Text('Sign in to continue',style: _textTheme.bodyText2),SizedBox(height: 60),EmailInput(label: 'EMAIL'),PasswordInput(label: 'PASSWORD'),Button(
          label: 'Login',icon: Icons.link,theme: ButtonColor.PRIMARY,onPressed: () {},);

我能够在居中的列周围应用扩展的小部件,但确实有效,但是如果内容大于屏幕高度,我就失去了滚动的能力。

这里也是一个例子供参考

enter image description here

解决方法

虽然不确定如何在SingleChildScrollView中做到这一点,

尝试将ListViewshrinkWrap: true一起使用

Container(
    width: MediaQuery.of(context).size.width / 2,height: double.infinity,padding: const EdgeInsets.fromLTRB(100,30,100,0),child: Center(
      child: ListView(
        shrinkWrap: true,children: [
           LoginLayout(),],)
    ),)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...