Question

我的代码的当前状态：

@override
Widget build(BuildContext context) {
  return Container(
      decoration: Grad2(),
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // ...
        ],
      ),
    );
}

这导致了这个漂亮的登录页面，但是出现了一个问题（键盘向上时底部溢出了45个像素）：

No problem Login page

Bottom overflowed by 45 pixels when keyboard is up

所以我尝试使用SingleChildScrollView，但随后导致黑屏：

@override
Widget build(BuildContext context) {
 return SingleChildScrollView(
  child: ConstrainedBox(
    constraints: BoxConstraints(minHeight: BoxConstraints().maxHeight),
    child: Container(
      decoration: Grad2(),
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // ...
        ],
      ),
    ),
  ),
);
}

但是我得到的是白屏。我可以知道为什么吗？

Answer 1

尝试一下：

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
      child: Container(
          height: MediaQuery.of(context).size.height,
          decoration: Grad2(),
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // ...
            ],
          ),
       ),
    );
}

Answer 2

结果是，我可以将Container设置为显示器的高度，方法是将Container的高度设置为MediaQuery.of(context).size.height。最后，使用

@override
Widget build(BuildContext context) {
 return SingleChildScrollView(
  child: Container(
    height: MediaQuery.of(context).size.height,
    decoration: Grad2(),
    padding: EdgeInsets.all(16),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // ...
      ],
    ),
  ),
);
}

如何使容器可滚动？

2 个答案: