行中有两个用Expanded包装的容器,但当使用SingleChildScrollView Over Row时,容器的高度将减少到它的子级.

如果没有SingleChildScrollView,输出将如下所示,但不能滚动.

  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.sizeOf(context).width;
    final screenHeight = MediaQuery.sizeOf(context).height;

    return Scaffold(
        body: SafeArea(
            child: Center(
      child: Container(
        color: Colors.blue,
        // height: screenHeight,
        child: Row(
          children: [
            Expanded(
              child: Container(
                color: mainLightColor,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image(
                        width: MediaQuery.sizeOf(context).width * 0.22,
                        height: MediaQuery.sizeOf(context).width * 0.22,
                        fit: BoxFit.contain,
                        image: const AssetImage('assets/images/logo.png')),
                  ],
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: blackColor,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: screenWidth * 0.2,
                      height: 35,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(45),
                        color: mainMediumColor,
                      ),
                      child: Center(
                        child: Text(
                          'Create Account',
                          style: GoogleFonts.poppins(),
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Container(
                      width: screenWidth * 0.2,
                      height: 35,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(45),
                        border: Border.all(color: mainMediumColor),
                        color: blackColor,
                      ),
                      child: Center(
                        child: Text(
                          'Log In',
                          style: GoogleFonts.poppins(color: whiteColor),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    )));
  }
}

在不使用SingleChildScrollView的情况下,输出如下

W

使用SingleChildScrollView,输出如下所示

enter image description here

  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.sizeOf(context).width;
    final screenHeight = MediaQuery.sizeOf(context).height;

    return Scaffold(
        body: SafeArea(
            child: Center(
      child: SingleChildScrollView(
        child: Container(
          color: Colors.blue,
          // height: screenHeight,
          child: Row(
            children: [
              Expanded(
                child: Container(
                  color: mainLightColor,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image(
                          width: MediaQuery.sizeOf(context).width * 0.22,
                          height: MediaQuery.sizeOf(context).width * 0.22,
                          fit: BoxFit.contain,
                          image: const AssetImage('assets/images/logo.png')),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: blackColor,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        width: screenWidth * 0.2,
                        height: 35,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(45),
                          color: mainMediumColor,
                        ),
                        child: Center(
                          child: Text(
                            'Create Account',
                            style: GoogleFonts.poppins(),
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                      Container(
                        width: screenWidth * 0.2,
                        height: 35,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(45),
                          border: Border.all(color: mainMediumColor),
                          color: blackColor,
                        ),
                        child: Center(
                          child: Text(
                            'Log In',
                            style: GoogleFonts.poppins(color: whiteColor),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    )));
  }
}

我想要滚动的容器的完全高度,但SingleChildScrollView根据子元素的高度降低它.

我为容器提供了ScreenHeight,但它不起作用.

有什么解决办法吗?谢谢

推荐答案

你可以使用ConstrainedBoxIntrinsicHeight的组合.替换

      child: SingleChildScrollView(
        child: Container(
          color: Colors.blue,
          // height: screenHeight,
          child: Row(

使用

      child: SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(minHeight: screenHeight),
          child: IntrinsicHeight(
            child: Row(

Flutter相关问答推荐

在Flutter 中压缩图片返回空

来自FutureProvider的数据只打印两个不同的变量,它们对一个实例只有一次相同的值,为什么?

我有相关的下拉菜单Flutter Windows应用程序的问题

如何正确处理Flutter 翼中使用火基时发生的碰撞?

Ffmpeg_kit_fltter:^6.0.3版权问题

在flutter web上渲染多个Youtube视频

在Dart中使用Riverpod代码生成时出现问题(addListener)

为什么我的Flutter 动画过渡没有发生?

尽管海拔设置为 0,如何删除 appBar 下的下划线

如何将此文本按钮剪辑在堆栈中的圆形头像上方?

Flutter canvas 绘制不同 colored颜色 的原始点

无法使用 bloc 更新 ListView.builder 的特定时间

Flutter/Riverpod 创建复杂对象的副本,其值在某处发生变化

Cloud firestore:如何使用 map 对象创建和更新嵌套数组

在提供程序包更改通知程序中构建倒计时时钟

如何在椭圆形图像周围添加边框?Flutter

我想在数组中添加项目

如何从我的Flutter 项目中删除错误?

如何在 IntroductionScreen 小部件 Flutter 中制作全屏渐变色

Flutter:如何将 AssetImage 转换为 Unit8List?