如何使用SingleChildScrollview飘动在列之间添加空空间

发布于 2025-01-24 15:18:09 字数 2742 浏览 0 评论 0 原文

我使用一列,其中还有两个列,并使用 mainaxisalignment.spacebetewweew 属性对齐它们,以便它们之间有一个空白空间。但是在小屏幕上,我没有足够的空间来容纳所有小部件,因此我决定添加一个单层次旋转以允许滚动。但是我遇到了一个问题,然后列之间的空白空间消失了。告诉我如何添加滚动并在列之间保持空空间?

代码

Expanded(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                children: [
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(
                      SvgPicture.asset(
                        constants.Assets.profile,
                      ),
                      'My Profile'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(SvgPicture.asset(constants.Assets.profile),
                      'My Preferences'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(
                      SvgPicture.asset(constants.Assets.dashboard),
                      'Dashboard'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(
                      SvgPicture.asset(constants.Assets.wallet), 'Wallet'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                ],
              ),
              // const Spacer(),
              Padding(
                padding: const EdgeInsets.only(bottom: 19),
                child: Column(
                  children: [
                    _createDrawerItem(SvgPicture.asset(constants.Assets.invite),
                        'Invite & Earn !',
                        horPadding: 11),
                    _createDrawerItem(
                        SvgPicture.asset(constants.Assets.settings), 'Settings',
                        horPadding: 11),
                  ],
                ),
              ),
            ],
          ),
        ),
      );

添加了SinglechildScrollview

“在此处输入图像说明”

And I use a column in which there are 2 more columns and align them using the MainAxisAlignment.spaceBetween property so that there is an empty space between them. But on small screens, I don't have enough space for all the widgets, so I decided to add a SingleChildScrollView to allow scrolling. But I ran into a problem that then the empty space between the columns disappears. Tell me how to add scrolling and keep empty space between columns?

code

Expanded(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                children: [
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(
                      SvgPicture.asset(
                        constants.Assets.profile,
                      ),
                      'My Profile'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(SvgPicture.asset(constants.Assets.profile),
                      'My Preferences'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(
                      SvgPicture.asset(constants.Assets.dashboard),
                      'Dashboard'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(
                      SvgPicture.asset(constants.Assets.wallet), 'Wallet'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                ],
              ),
              // const Spacer(),
              Padding(
                padding: const EdgeInsets.only(bottom: 19),
                child: Column(
                  children: [
                    _createDrawerItem(SvgPicture.asset(constants.Assets.invite),
                        'Invite & Earn !',
                        horPadding: 11),
                    _createDrawerItem(
                        SvgPicture.asset(constants.Assets.settings), 'Settings',
                        horPadding: 11),
                  ],
                ),
              ),
            ],
          ),
        ),
      );

added SingleChildScrollView

enter image description here

without SingleChildScrollView

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦里兽 2025-01-31 15:18:09

如果使用SinglechildScrollview,但是(

mainAxisAlignment: MainAxisAlignment.spaceBetwen

)无法使用。

现在,您使用

 SizeBox(),

高度将不是一个响应问题

If you use SingleChildScrollView , However (

mainAxisAlignment: MainAxisAlignment.spaceBetwen

) Can't use.

Now you use

 SizeBox(),

Using Height will not be a responsive issue

静若繁花 2025-01-31 15:18:09
Column(
  children: [
    ....
  ]
),
SizedBox(
  height: 100,//custom height
),
Column(
  children: [
    ....
  ]
),

或者

Column(
  children: [
    ....
  ]
),
Padding(
    padding: EdgeInsets.only(top:100),
    Column(
      children: [
        ....
      ]
    ),
),
Column(
  children: [
    ....
  ]
),
SizedBox(
  height: 100,//custom height
),
Column(
  children: [
    ....
  ]
),

OR

Column(
  children: [
    ....
  ]
),
Padding(
    padding: EdgeInsets.only(top:100),
    Column(
      children: [
        ....
      ]
    ),
),
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文