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

r7s23pms  于 2023-07-31  发布在  其他
关注(0)|答案(2)|浏览(213)

我有两个页面,正在使用showModalBottomSheet导航到第二个页面。在第二页上,我使用了DraggableScrollableSheet。当文本表单字段为空时,我必须限制底部表单解雇,而轻敲外部。我已经限制了底部的工作表dismissing向下滑动的功能,我不知道如何retrict的底部工作表dismissing,而轻敲外面。是否有任何可能的选择?
这是示例代码,

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'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

字符串

yqkkidmi

yqkkidmi1#

设置为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'),
            ),
          ],
        ),
      );
    },
  );
}

字符串

xt0899hw

xt0899hw2#

showModalBottomSheet具有属性isDismissible。默认值为true,将其设置为false。

相关问题