在底部导航栏上方显示底部模态表
问题描述 投票：0回答：3
在下图中，我在单击“底部导航栏”项目时添加了 showModalBottomSheet，但 BottomNavigationBar 被模式表隐藏，所以我想让它即使底部表存在也可见。谁能帮帮我吗？
这是我的底部导航代码：
Widget _bottomNavigationBar() {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
key: scaffoldState,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.branding_watermark_outlined),
label: 'Brands',
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
label: 'Category',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
)
],
currentIndex: _selectedIndex,
selectedItemColor: AppColors.blue,
onTap: (newIndex) => {
if (newIndex == 1)
{showBrandsBottomSheet(context)}
else if (newIndex == 2)
{showCategoryBottomSheet(context)}
else
{
setState(() {
_selectedIndex = newIndex;
})
}
});
}
这是我的底部模型表代码：
showBrandsBottomSheet(BuildContext context) {
return showModalBottomSheet<void>(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
),
context: context,
useRootNavigator: true,
isScrollControlled: true,
builder: (BuildContext _) {
return Container(
color: Colors.white,
height: MediaQuery.of(context).size.height / 2,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 5, top: 3),
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: const Align(
alignment: Alignment.topRight,
child: Icon(Icons.close)),
),
),
Container(
color: Colors.white,
height: 350,
child: ListView.builder(
key: Key('builder ${_selected.toString()}'), //a
scrollDirection: Axis.vertical,
// shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
itemCount: brandList.length,
itemBuilder: (BuildContext context, int index) {
return Theme(
data: Theme.of(context)
.copyWith(dividerColor: Colors.white),
child: ExpansionTile(
// tilePadding: const EdgeInsets.all(0),
key: Key(index.toString()), //attention
initiallyExpanded: index == _selected, //attention
collapsedIconColor: Colors.blue,
iconColor: Colors.blue,
backgroundColor: Colors.white,
title: Text(
brandList[index],
style: const TextStyle(
fontSize: 13.0,
color: Colors.black,
fontWeight: FontWeight.w600),
),
children: <Widget>[
Container(
color: Colors.blue[50],
child: Column(
children: _buildExpandableBrands(brandList),
),
),
],
onExpansionChanged: ((newState) {
if (newState) {
setState(() {
const Duration(seconds: 20000);
_selected = index;
});
} else {
setState(() {
_selected = -1;
});
}
}),
));
},
),
),
],
),
),
);
},
);
}
3个回答
44
投票
投票
设置 useRootNavigator=true。这将在所有其他内容之上显示模型表。
showModalBottomSheet(
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder: (context) {
return BottomBarView(
);
});
1
投票
投票
最后，这个问题帮助我完成了这件事。
这是我的工作代码：
Widget _bottomNavigationBar() {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
key: scaffoldState,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.branding_watermark_outlined),
label: 'Brands',
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
label: 'Category',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
)
],
currentIndex: _selectedIndex,
selectedItemColor: AppColors.blue,
onTap: (newIndex) => {
if (newIndex == 1)
{
_scaffoldKey.currentState?.showBottomSheet((_) => Container(
child: showBrandsBottomSheet(),
))
}
else if (newIndex == 2)
{
{
_scaffoldKey.currentState?.showBottomSheet((_) => Container(
child: showCategoryBottomSheet(),
))
}
}
else
{
setState(() {
_selectedIndex = newIndex;
})
}
});
}
显示品牌底表：
showBrandsBottomSheet() {
return Container(
color: Colors.white,
height: MediaQuery.of(context).size.height / 2,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 5, top: 3),
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: const Align(
alignment: Alignment.topRight, child: Icon(Icons.close)),
),
),
Container(
color: Colors.white,
height: 350,
child: ListView.builder(
key: UniqueKey(),
scrollDirection: Axis.vertical,
itemCount: brandList.length,
itemBuilder: (BuildContext context, int index) {
cardKeyList.add(GlobalKey(debugLabel: "index :$index"));
return Theme(
data: Theme.of(context)
.copyWith(dividerColor: Colors.white),
child: ExpansionTileCard(
key: cardKeyList[index],
initiallyExpanded: false,
title: Text(
brandList[index],
style: const TextStyle(
fontSize: 13.0,
color: Colors.black,
fontWeight: FontWeight.w600),
),
children: <Widget>[
Container(
color: Colors.blue[50],
child: Column(
children: _buildExpandableBrands(brandList),
),
),
],
onExpansionChanged: (value) {
if (value) {
Future.delayed(const Duration(milliseconds: 200),
() {
for (var i = 0; i < cardKeyList.length; i++) {
if (index != i) {
cardKeyList[i].currentState?.collapse();
}
}
});
}
},
));
},
),
),
],
),
),
);
}
现在它开始显示在底部导航上方。
0
投票
投票
我也面临同样的问题，我想显示模式底部工作表，但该工作表不应隐藏底部栏，并且我还想显示显示底部工作表的按钮以启用和禁用底部工作表 所以我在堆栈小部件中使用了 DraggableScrollableSheet ，它将在底部工作表顶部显示按钮
if (isShowBottomListSheet)
DraggableScrollableSheet(
initialChildSize: 0.3,
// Starts at 30% of screen height
minChildSize: 0.3,
// Minimum size when collapsed
maxChildSize: 1.0,
// Maximum size when fully expanded
builder: (context, scrollController) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black26, blurRadius: 10)
],
),
child: ListView.builder(
controller: scrollController,
itemCount: 20, // Example list of items
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
),
);
},
),
[enter image description here][1]
最新问题
- 启动、停止和监视其他脚本的主脚本（Python Watchdog）
- VS Code 不对打字稿文件进行类型检查
- vue.js 新手，我如何将模型与组件分开
- 将volume_up_key_code 115从Raspberry Pi 5发送到iPhone
- 通过与别名的关联进行 Sequelize 分组（model->model2 AS 'alias'）
- 顺序访问大尺寸向量时是否可以减少缓存未命中？
- 如何在 Spring Data Rest 中保护 RepositoryRestResource
- 如何在登录 Astro 应用程序的同时注销 Shopify API？
- 在 ngx-charts-pie-chart 中添加图例项的链接？
- 签名 cookie 不存在时 Cloudfront 重定向
- 在 flutter 中每 x 小时显示一条通知
- django asgi 引发 django.core.exceptions.AppRegistryNotReady：应用程序尚未加载
- 滚动在 Angular ionic 中消失了
- Gitlab maven部署到包registry
- Laravel 11 模型中的数组到字符串转换
- 尝试安装opencve时遇到错误
- `ConversationSummaryBufferMemory` 未完全定义；你应该定义`BaseCache`，然后调用`ConversationSummaryBufferMemory.model_rebuild()`
- 如何在Gitlab中部署maven库依赖？
- Azure Blob 上传无法在 ASP .Net Core 应用程序中工作
- AWS EventBridge 规则中是否有通配符？
© www.soinside.com 2019 - 2024. All rights reserved.