Flutter：如何检测用户通过下拉关闭Modal Bottom Sheet

要区分「主动点击添加按钮关闭」和「下拉关闭」两种场景，核心是通过showModalBottomSheet的返回值来判断，具体实现步骤如下：

1. 给「添加记录」按钮设置关闭标记 #

在你的showExpenseTabContent和showIncomeTabContent组件里，点击添加按钮关闭BottomSheet时，传入一个自定义标记（比如true），表明这是主动完成添加操作触发的关闭：

// 示例：添加按钮的点击逻辑
ElevatedButton(
  onPressed: () {
    // 先执行添加记录的业务逻辑
    // ...
    // 关闭BottomSheet并传递标记值
    Navigator.pop(context, true);
  },
  child: const Text('添加记录'),
)

2. 监听BottomSheet的关闭返回值 #

修改showModalBottomSheet的调用方式，用await接收返回值，根据返回值判断关闭原因：

// 改为异步调用以接收返回值
final result = await showModalBottomSheet(
  isScrollControlled: true,
  backgroundColor: Colors.white,
  elevation: 15,
  context: context,
  builder: (BuildContext context) {
    // 原builder内的代码保持不变
    return StatefulBuilder(
      builder: (BuildContext context, StateSetter setState) {
        return SingleChildScrollView(
          padding: EdgeInsets.only(
              top: 10,
              bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Column(
            children: [
              const SizedBox(height: 10),
              Image.asset('assets/bottomSheetBar.png'),
              const SizedBox(height: 20),
              TabBar(
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorColor: AppColors.mainColor,
                controller: _tabController,
                unselectedLabelColor: AppColors.lightTextColor,
                tabs: [
                  Tab(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset('assets/expense_tab_logo.png'),
                        const SizedBox(width: 10),
                        const Text(
                          'Expense',
                          style: TextStyle(color: AppColors.expenseColor),
                        ),
                      ],
                    ),
                  ),
                  Tab(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset('assets/income_tab_logo.png'),
                        const SizedBox(width: 10),
                        const Text(
                          'Income',
                          style: TextStyle(color: AppColors.incomeColor),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 440,
                child: TabBarView(
                  controller: _tabController,
                  children: [
                    showExpenseTabContent(setState),
                    showIncomeTabContent(setState),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  },
);

// 根据返回值执行对应逻辑
if (result == true) {
  // 主动点击添加按钮关闭，执行重置操作
  _resetFieldsAndTab();
} else {
  // 下拉关闭或其他非主动添加场景，跳过重置
}

3. 封装重置逻辑（可选） #

把重置文本字段和TabController的逻辑单独封装成方法，方便调用和维护：

void _resetFieldsAndTab() {
  // 重置文本输入框（假设用TextEditingController管理）
  _expenseController.clear();
  _incomeController.clear();
  // 重置TabController到初始索引
  _tabController.index = 0;
}

原理说明：用户下拉关闭BottomSheet时，系统会自动调用Navigator.pop(context)，此时返回值为null；而主动点击添加按钮时我们传递了true，通过判断返回值就能精准区分两种关闭场景，按需执行重置操作。

内容的提问来源于stack exchange，提问作者RIZWAN ALI