Question

我正在尝试创建一个包含可滚动列的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,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Welcome Back!', style: _textTheme.headline2),
        SizedBox(height: 10),
        Text('Sign in to continue', style: _textTheme.bodyText2),
        SizedBox(height: 60),
        EmailInput(label: 'EMAIL'),
        SizedBox(height: 30),
        PasswordInput(label: 'PASSWORD'),
        SizedBox(height: 60),
        Button(
          label: 'Login',
          icon: Icons.link,
          theme: ButtonColor.PRIMARY,
          onPressed: () {},
        ),
      ],
    ),
  ],
);

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

这里也是一个例子供参考

Answer 1

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

尝试将ListView与shrinkWrap: 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(),
         ],
       )
    ),
   )

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

1 个答案: