在bottomNavigationBar下面显示bottomSheet [英] Show bottomSheet beneath bottomNavigationBar
本文介绍了在bottomNavigationBar下面显示bottomSheet的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我们的应用中,我们使用了bottomSheet和bottomNavigationBar.
In our app we're using a bottomSheet along with a bottomNavigationBar.
bottomSheet出现在bottomNavigationBar上方,是否有办法使其显示在下方?
The bottomSheet appears above the bottomNavigationBar, is there a way to make it appear underneath?
这是一个示例应用程序:
Here's a sample app:
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, title: Text('Test'), groupValue: 'test', onChanged: (value) {}, value: true),
]));
});
};
return MaterialApp(
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text('Sample App'),
),
bottomNavigationBar: Container(
child: IconButton(
icon: Icon(Icons.edit),
onPressed: _showBottomSheet,
),
),
),
);
}
}
推荐答案
您可以使用Column
将弹出窗口与底部导航栏结合起来,并使用
You can combine your popup with the bottom navigation bar using Column
and simulate bottom sheet behavior using 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],
child: Column(mainAxisSize: MainAxisSize.min, children: [
RadioListTile(dense: true, title: Text('Test'), groupValue: 'test', onChanged: (value) {}, value: true),
RadioListTile(dense: true, title: Text('Test'), groupValue: 'test', onChanged: (value) {}, value: 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(),
),
],
),
),
),
);
}
}
对于生产应用程序,请考虑使用SafeArea
在底部添加适当的填充.
For a production app, consider using SafeArea
to add proper padding at the bottom.
这篇关于在bottomNavigationBar下面显示bottomSheet的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文