SingleChildScrollView for Column inside Column

Question

在下图中，我想要实现的是让绿色部分Scrollable ，因为如果键盘弹出，它不会给我渲染错误。

整个屏幕只是一个Column ，其中黄色部分是自定义小部件，绿色部分是其中的另一个Column 。

我尝试了不同的解决方案。 将整个 Column 包装到 SingleChildScrollView 中，但我希望黄色部分保持固定在顶部。 我也尝试过仅将绿色部分包装到 SingleChildScrollView 中，但它不起作用（仍然引发渲染错误）。

我已经看到我可以使用SliverAppBar ，但我想使用我的自定义小部件（黄色部分）来实现。

我有点卡住了。

Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            AppBarWidget(height: size.height * 0.15),
            Container(
              height: size.height - size.height * 0.15 - mediaQuery.padding.top,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  EditableAvatarWidget(
                    circleRadius: circleRadius,
                    badge: test,
                    border: Border.all(color: test.mainColor, width: 5),
                  ),
                  Column(
                    children: [
                      Text(
                        "Name Surname",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 26,
                            color: Global.blackGrey),
                      ),
                      SizedBox(height: 10),
                      Text(
                        "mail@mail.com",
                        style: TextStyle(fontSize: 18, color: Colors.grey),
                      )
                    ],
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(
                        horizontal: size.width / 6, vertical: 0),
                    child: FlatCustomButton(
                      onPress: () {},
                      background: Global.editProfileButton,
                      text: "Edit profile",
                      textColor: Global.blackGrey,
                      inkwellColor: Colors.black,
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );

我可能还会考虑实现一个 ListView (?)，但正如您所见，我已经在 Column 内设置了mainAxisAlignment: MainAxisAlignment.spaceAround以具有我的 UI 偏好。

你知道我怎么能做到这一点吗？

TL;DR：让属于另一列（全屏）的绿色部分（列）只能滚动，让黄色部分停留在固定的 position

Answer 1

我就是这样修的。

我已经将 Green Column Part 封装在Extended之前，然后封装到SingleChildScrollView中。 它完全按照我想要的方式工作。

现在只有绿色部分滚动，黄色部分在键盘出现时停留在固定的 position 中。

代码：

 return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            AppBarWidget(
              height: size.height * 0.15,
            ),
            Expanded( //This 
              child: SingleChildScrollView( // and this fixed my issue
                child: Container(
                  height:
                      size.height - size.height * 0.15 - mediaQuery.padding.top,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      EditableAvatarWidget(
                        circleRadius: circleRadius,
                        badge: test,
                        border: Border.all(color: test.mainColor, width: 5),
                      ),
                      Column(
                        children: [
                          Text(
                            "Name Surname",
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 26,
                                color: Global.blackGrey),
                          ),
                          SizedBox(height: 10),
                          Text(
                            "mail@mail.com",
                            style: TextStyle(fontSize: 18, color: Colors.grey),
                          )
                        ],
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: size.width / 6, vertical: 0),
                        child: FlatCustomButton(
                          onPress: () {},
                          background: Global.editProfileButton,
                          text: "Edit profile",
                          textColor: Global.blackGrey,
                          inkwellColor: Colors.black,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );

Answer 2

您可以像您已经尝试过的那样使用SliverAppBar ，但在其中您有flexibleSpaceBar ，它具有可以接受任何类型的 Widget 的背景属性。

示例代码在这里。

Answer 3

如果您可以为SingleChildScrollView内的Column设置固定高度，那可能是最好的，即使它涉及您提供的修复程序中的一些“黑客”。

但是，当您需要在 Column 中灵活/扩展内容时，您可以考虑在SingleChildScrollView内使用具有IntrinsicHeight的ConstrainedBox ，如SingleChildScrollView 的文档所述。

我发现对于相对简单的屏幕，这很有效。 例如，如果你有一个输入字段并且键盘弹出，你真的只需要滚动，就像你的代码一样。

LayoutBuilder(
    builder: (BuildContext context, BoxConstraints viewportConstraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: viewportConstraints.maxHeight,
          ),
          child: IntrinsicHeight(
            child: Column(
              children: <Widget>[
              ...

注意：对于更复杂的屏幕， IntrinsicHeight可能成本太高，请参阅其文档了解更多信息。