我有两个页面,正在使用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'),
),
],
),
),
),
),
),
);
}
}
字符串
2条答案
按热度按时间yqkkidmi1#
设置为false
isDismissible:false
字符串
xt0899hw2#
showModalBottomSheet具有属性
isDismissible
。默认值为true,将其设置为false。