添加 SingleChildScrollView 时列移动 Flutter

Question

需要帮助。我在页面上创建了一个 column，里面还有 2 个 columns，所以我将底部的按钮移到了最底部，以便它们始终位于屏幕底部。但是当我添加一个 SingleChildScrollView 使页面滚动时，columns 之间的 space 消失并且底部按钮移动到其他小部件下方。如何解决问题，以便在添加 SingleChildScrollView 时，有一个空的 space 并且按钮保留在屏幕的最底部？

正文

Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24),
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              children: [
                const SizedBox(height: 121.0),
                BackStepWidget(
                  text: 'Balance: $coins',
                  textStyle: constants.Styles.largeHeavyTextStyleWhite,
                ),
                const Text(
                  'Buy JoinCoins',
                  style: constants.Styles.bigHeavyTextStyleWhite,
                ),
                const Image(
                  image: AssetImage('assets/images/image.png'),
                ),
                const Text('I Want To Buy',
                    style: constants.Styles.smallBoldTextStyleWhite),
                const SizedBox(height: 10),
                const CoinsCounterWidget(),
                const SizedBox(height: 10),
                const Text('JoynCoins',
                    style: constants.Styles.smallBoldTextStyleWhite),
              ],
            ),
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(bottom: 24),
                  child: DefaultButtonGlow(
                    text: 'Buy me JoynCoins for 100% battery.',
                    color: constants.Colors.greyLight.withOpacity(0.4),
                    textStyle: constants.Styles.buttonTextStyle,
                    shadowColor: Colors.transparent,
                    borderColor: constants.Colors.purpleMain,
                    onPressed: () {
                      showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return const DefaultAlertDialog(
                            text:
                                'Please set a payment method for buying JoynCoins.',
                          );
                        },
                      );
                    },
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 47),
                  child: DefaultButtonGlow(
                    text: 'Buy Now ',
                    color: constants.Colors.purpleMain,
                    textStyle: constants.Styles.buttonTextStyle,
                    shadowColor: constants.Colors.purpleMain,
                    borderColor: constants.Colors.purpleMain,
                    onPressed: () {
                      showDialog(
                          context: context,
                          builder: (BuildContext context) {
                            return const DefaultAlertDialog(
                              text: "You'r about to buy",
                              isText2: true,
                              text2: '2500 JoynCoins',
                            );
                          });
                    },
                  ),
                )
              ],
            )
          ],
        ),
      ));

已添加 SingleChildScrollView

没有SingleChildScrollView

Answer 1

在 Columns 之间使用 SizedBox 或在 Singlechildscrollview 中使用以下内容

physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,

Answer 2

您可以简化此代码以了解问题。 MainAxisAlignment.spaceBetween 将在小部件之间提供最大 space 秒。

body: Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text("top"),
    Text("bottom"),
  ],
),

用 SingleChildScrollView 包装后，Column 为其子项采用最小高度并变为，

您可以使用 SizedBox 在项目之间提供 space。您可以使用我在您之前的问题中发布的 LayoutBuidler。为此，我使用 MediaQuery

body: SingleChildScrollView(
  child: Column(
    children: [
      Text("top"),
      SizedBox(
        height: MediaQuery.of(context).size.height * .4,
      ), // you custom height
      Text("bottom"),
    ],
  ),
),

添加 SingleChildScrollView 时列移动 Flutter

Columns shift when SingleChildScrollView is added Flutter

flutter

dart

flutter-layout