Flutter - 使用网格滚动

Question

我有一个带有一些输入字段和网格视图的屏幕。我希望网格具有屏幕可以容纳的最大元素。如果屏幕已满，我想让屏幕可滚动。如果您有任何想法，请提供帮助。

This is the screen without any items in the grid view

The screen when there are maximum of items to fit the screen

The screen when I try to add a new item. I want the screen to be scrollable if the screen can't fit another item.

这是我的正文代码：

body: Container(
      padding: const EdgeInsets.only(left: 32.0, right: 32.0, top: 5.0),
      child: Column(
        children: [
          InputTextField(
            hint: kMonthlyIncome,
            typeOfText: TextInputType.numberWithOptions(decimal: true),
            check: isValidBuget,
            textFieldKey: Key('set_manager_budget_text_income_sum'),
            key: Key('set_income_sum'),
            inputTextChecked: (bool inputTextChecked, String callbackText) {
              controller.updateMonthlyIncome(
                  inputTextChecked, callbackText);
            },
          ),
          SizedBox(
            height: 21.0,
          ),
          InputTextField(
            hint: kMonthlyBudget,
            typeOfText: TextInputType.numberWithOptions(decimal: true),
            textFieldKey: Key('set_manager_budget_text_budget_sum'),
            key: Key('set_budget_sum'),
            check: isValidBuget,
            inputTextChecked: (bool inputTextChecked, String callbackText) {
              controller.updateMonthlyBudget(
                  inputTextChecked, callbackText);
            },
          ),
          SizedBox(
            height: 21.0,
          ),
          InputFieldDatePicker(
            hint: kMonthlyRenewalIncome,
            inputTextCallback:
                (bool inputTextChecked, String callbackText) {
              controller.updateIncomeRenewalDate(
                  inputTextChecked, callbackText);
            },
          ),
          SizedBox(
            height: 24.0,
          ),
          Wrap(
            children: [
              Obx(
                () => GridView.builder(
                  physics: ScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: controller.alertList.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    childAspectRatio: 153.0 / 73.0,
                    crossAxisSpacing: 24.0,
                    mainAxisSpacing: 24.0,
                    crossAxisCount: 2,
                  ),
                  itemBuilder: (BuildContext context, int index) =>
                      AlertBox(
                    alert: controller.alertList[index].sumAlert.toInt(),
                    deleteAlertFunction: () =>
                        controller.deletePressedAlert(index),
                  ),
                ),
              )
            ],
          ),
          SizedBox(
            height: 24.0,
          ),
          Expanded(
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Obx(
                () => CustomButton(
                  buttonText: kSaveBudget,
                  backgroundColor: Color(controller.rxColor.value),
                  textStyle: kCustomButtonOrangeTextStyle,
                  onTap: controller.isButtonEnabled
                      ? controller.addTransaction
                      : null,
                ),
              ),
            ),
          ),
          SizedBox(
            height: 24.0,
          ),
        ],
      ),
    ),

Answer 1

我明白你的意思。我试过了，但问题是我希望按钮位于屏幕底部，无论屏幕大小如何。我上传了几张照片，以便您了解我想要实现的目标。

The button is under the grid view (the distance is firstly given by the childAspectRatio)