如何垂直滚动一行，其中有两个扩展的小部件，并且 LayoutBuilder 嵌套在这些扩展的小部件中？

Question

我正在开发一个网络应用程序。屏幕分为两个嵌套在 Row() 小部件中的扩展小部件，每个小部件中都嵌套有 LayoutBuilder。

我需要什么：

1 当用户更改 Web 应用程序的高度时，UI 不应从底部溢出，而必须滚动。

实现这一目标时我遇到的问题：

1. 我使用 SingleChildScrollView 滚动 Row，但它根据孩子的身高降低了高度。

2. 我用 Container 包裹 Row 并给它固定的屏幕高度，但它使 UI 溢出且不可滚动。

3. 将 CustomScrollView 与 SliverFillRemaining 结合使用，并尝试使用 SliverToBoxAdapter。它启用了滚动，但没有渲染 UI，并且在内部使用 LayoutBuidlder 时抛出异常。

4. 我还使用了带有约束属性和IntrinsicHeight的ConstrainedBox，它解决了问题，但LayoutBuilder在IntrinsicHeight小部件中不起作用。

第一种情况的代码是

   return SafeArea(
        child: Scaffold(
            body: SingleChildScrollView(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Container(
              decoration: const BoxDecoration(
                color: Color.fromARGB(255, 216, 244, 241),
              ),
              child: const Padding(
                padding: EdgeInsets.symmetric(vertical: 40),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 5),
                      child: FlutterLogo(
                        size: 200,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          Expanded(
              child: Container(
            decoration: const BoxDecoration(
              color: blackColor,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: screenWidth * 0.3,
                  height: 45,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(45),
                    border: Border.all(color: mainMediumColor),
                    color: blackColor,
                  ),
                  child: Center(
                    child: FittedBox(
                      fit: BoxFit.scaleDown,
                      child: Text(
                        'Log In',
                        style: GoogleFonts.poppins(
                            fontSize: 17, color: whiteColor),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )),
        ],
      ),
    )));

所需的用户界面

实现的UI

这个问题有什么解决办法吗？？？？

Answer 1

问题解决了。这是实现预期结果的代码。

 return SafeArea(
      child: Scaffold(
          body: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        flex: 1,
        child: Container(
          decoration: const BoxDecoration(
            color: Color.fromARGB(255, 216, 244, 241),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 40),
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Container(
                      height: 250,
                      width: 250,
                      color: Colors.red,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Container(
                      height: 250,
                      width: 250,
                      color: Colors.red,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Container(
                      height: 250,
                      width: 250,
                      color: Colors.red,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
      Expanded(
          flex: 1,
          child: Container(
            decoration: const BoxDecoration(
              color: blackColor,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: screenWidth * 0.3,
                  height: 45,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(45),
                    border: Border.all(color: mainMediumColor,),
                    color: blackColor,
                  ),
                  child: Center(
                    child: FittedBox(
                      fit: BoxFit.scaleDown,
                      child: Text(
                        'Log In',
                        style: GoogleFonts.poppins(
                          fontSize: 17,
                          color: whiteColor,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )),
    ],
  )));