用于列内部列的SingleChildScrollView

问题描述 投票:0回答:2

在下面的图片中,我想要实现的是让绿色部分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(
                        "[email protected]",
                        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:仅滚动属于另一列(整个屏幕)的GreenPart(列),让Yellow Part停留在该固定位置上)>

Picture

在下图中,我要实现的目标是让绿色部分可滚动,因为在弹出键盘的情况下,它不会给我渲染错误。整个屏幕只是一列,其中...

flutter flutter-layout singlechildscrollview
2个回答
1
投票

您可以像尝试过的那样使用SliverAppBar,但是在其中有flexibleSpaceBar,它具有可以接受任何类型的小部件的背景属性。


0
投票

这就是我固定的方式。

© www.soinside.com 2019 - 2024. All rights reserved.