在我们的应用程序中,我们使用了bottomSheet和bottomNavigationBar.
bottomSheet出现在bottomNavigationBar上方,有没有办法让它出现在下面?
这是一个示例应用程序:
import 'package:Flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatefulWidget { @override _SampleAppState createState() => new _SampleAppState(); } class _SampleAppState extends State<SampleApp> { final _scaffoldKey = GlobalKey<ScaffoldState>(); PersistentBottomSheetController _sheetController; @override Widget build(BuildContext context) { final _showBottomSheet = () { _sheetController = _scaffoldKey.currentState.showBottomSheet((context) { return Container( color: Colors.grey[200],child: Column(mainAxisSize: MainAxisSize.min,children: [ RadioListTile(dense: true,title: Text('Test'),groupValue: 'test',onChanged: (value) {},value: true),RadioListTile(dense: true,])); }); }; return MaterialApp( home: Scaffold( key: _scaffoldKey,appBar: AppBar( title: Text('Sample App'),),bottomNavigationBar: Container( child: IconButton( icon: Icon(Icons.edit),onpressed: _showBottomSheet,); } }
解决方法
您可以使用Column将弹出窗口与底部导航栏组合使用,并使用
Expandable模拟底部工作表行为:
import 'package:Flutter/material.dart'; import 'package:expandable/expandable.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatefulWidget { @override _SampleAppState createState() => new _SampleAppState(); } class _SampleAppState extends State<SampleApp> { @override Widget build(BuildContext context) { buildBottomSheet() { return Container( color: Colors.grey[200],children: [ RadioListTile(dense: true,])); } return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Sample App'),body: Container( color: Colors.green,bottomNavigationBar: ExpandableNotifier( child: Column( mainAxisSize: MainAxisSize.min,children: [ ExpandableButton( child: SizedBox(height: 50,child: Center( child: Icon(Icons.edit),Expandable( expanded: buildBottomSheet(),],); } }