尽管在 Row() 中使用 Expanded，SingleChildScrollView 仍将 Container 的高度限制为子级

Question

行内有两个用展开包裹的容器，但是当使用 Row 上方的 SingleChildScrollView 时，容器的高度会降低到其子级。

如果没有 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 输出是这样的

使用 SingleChildScrollView 的输出是这样的

  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 的容器，但它不起作用。

有什么解决办法吗？谢谢

Answer 1

您必须在

Constraints

中使用

Container

:

Container(
minWidth: MediaQuery.sizeOf(context).width,
minHeight: MediaQuery.sizeOf(context).height,

child:....
)

根据您的

height

 使用 

width

 和 

requirements