问题

以下是您提供的代码的中文翻译部分：

我有两个页面，通过showModalBottomSheet导航到第二个页面。在第二个页面中，我使用了DraggableScrollableSheet。当文本表单字段为空时，我必须限制在点击外部时底部面板的关闭。我已经通过向下滑动的方式限制了底部面板的关闭，但不知道如何在点击外部时限制底部面板的关闭。是否有可能的选项？

这是示例代码：

import 'dart:ui';

import 'package:flutter/material.dart';

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

class HomePage extends StatefulWidget {
  const HomePage({Key? key});

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('可拖动可滚动底部面板示例'),
        backgroundColor: Colors.teal,
      ),
      body: Center(
        child: ElevatedButton(
            child: const Text('底部面板'),
            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({Key? 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('可拖动可滚动底部面板示例')),
                )
              : const Text('可拖动可滚动底部面板示例'),
          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 '此字段不能为空';
                      }
                      isValidField = true;
                      setState(() {});
                      return null;
                    },
                    decoration:
                        const InputDecoration(hintText: '在此输入文本'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      if (_formKey.currentState!.validate()) {
                        Navigator.pop(context);
                      }
                    },
                    child: const Text('返回'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

希望这可以帮助您理解代码。如果您需要更多帮助，请随时提问。

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

答案1

得分: 1

将以下部分翻译为中文：

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

答案2

得分: 0

showModalBottomSheet有一个属性isDismissible。默认值为true，将其设置为false。