如何限制在点击外部时关闭 showModalBottomSheet？

Question

我有两个页面，正在使用 showModalBottomSheet 导航到第二个页面。在第二页上，我使用了 DraggableScrollableSheet。当文本表单字段为空时，我必须在点击外部时限制底部工作表的关闭。我通过向下滑动功能限制了底部工作表的关闭，我不知道如何在点击外部时限制底部工作表的关闭。有没有可能的选择？

这是示例代码，

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Draggable scrollable sheet example'),
        backgroundColor: Colors.teal,
      ),
      body: Center(
        child: ElevatedButton(
            child: const Text('Bottom sheet'),
            onPressed: () {
              showModalBottomSheet(
                clipBehavior: Clip.hardEdge,
                context: context,
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(16),
                    topRight: Radius.circular(16),
                  ),
                ),
                backgroundColor: Colors.transparent,
                enableDrag: false,
                isDismissible: true,
                isScrollControlled: true,
                builder: (BuildContext context) => BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
                  child: const DraggablePage(),
                ),
              );
            }),
      ),
    );
  }
}

class DraggablePage extends StatefulWidget {
  const DraggablePage({super.key});

  @override
  State<DraggablePage> createState() => _DraggablePageState();
}

class _DraggablePageState extends State<DraggablePage> {
  DraggableScrollableController draggableScrollableController =
      DraggableScrollableController();
  final TextEditingController _controller = TextEditingController();
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  bool isValidField = true;

  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      maxChildSize: 0.8,
      minChildSize: 0.2,
      controller: draggableScrollableController,
      builder: (BuildContext context, ScrollController scrollController) =>
          Scaffold(
        appBar: AppBar(
          title: isValidField
              ? ScrollConfiguration(
                  behavior: const ScrollBehavior(),
                  child: SingleChildScrollView(
                      controller: scrollController,
                      child: const Text('Draggable scrollable sheet example')),
                )
              : const Text('Draggable scrollable sheet example'),
          backgroundColor: Colors.teal,
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Form(
              key: _formKey,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    controller: _controller,
                    onChanged: (String value) {
                      setState(() {});
                    },
                    validator: (String? value) {
                      
                      if (_controller.text.isEmpty) {
                        isValidField = false;
                        setState(() {});
                        return 'This field cannot be empty';
                      }
                      isValidField = true;
                      setState(() {});
                      return null;
                    },
                    decoration:
                        const InputDecoration(hintText: 'Enter text here'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      if (_formKey.currentState!.validate()) {
                        Navigator.pop(context);
                      }
                    },
                    child: const Text('Back'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

将其设置为 false

isDismissible:false

void openBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    barrierColor: Colors.black.withOpacity(0.5),
    isDismissible:false, // Prevents closing on background tap
    builder: (BuildContext context) {
      return Container(
        height: 200,
        child: Column(
          children: [
            // Bottom sheet content
            Text('This is the bottom sheet'),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop(); // Close the bottom sheet
              },
              child: Text('Close'),
            ),
          ],
        ),
      );
    },
  );
}

Answer 2

showModalBottomSheet 具有属性

isDismissible

。默认值为 true，将其设置为 false。