android - 我们如何在 Sliver App 小部件中添加底部导航栏
问题描述
我想在 Scrollable sliver App Widget 中添加这个固定的bottomNavigationbar,有什么方法可以做到这一点,或者有什么替代方法可以做到这一点
BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.card_giftcard),
title: Text('Deals'),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text('Favourites'),
),
BottomNavigationBarItem(
icon: Icon(Icons.portrait),
title: Text('Profile'),
),
],
)
解决方案
您当然可以将所述添加bottomNavigationBar
到SliverAppBar
usingNestedScrollView
并添加bottomNavigationBar
到它之外。这是工作代码:
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Sliver with bottomnavbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
fit: BoxFit.cover,
)),
),
];
},
body: Center(
child: Text("Text"),
),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home', style: TextStyle(color: Colors.black),),
),
BottomNavigationBarItem(
icon: Icon(Icons.card_giftcard),
title: Text('Deals',style: TextStyle(color: Colors.black),),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text('Favourites',style: TextStyle(color: Colors.black),),
),
BottomNavigationBarItem(
icon: Icon(Icons.portrait),
title: Text('Profile',style: TextStyle(color: Colors.black),),
),
],
),
);
希望这能回答你的问题。
推荐阅读
- java - 我怎样才能修复扑克牌组不重新实例化自身并将其限制为只有牌组中的 52 张牌?
- c++ - 如何用访问器方法替换字符串中的特定字符
- c - 行分区的稀疏矩阵向量乘法
- regex - Perl6 搜索然后用子程序的输出替换
- google-chrome - 为什么 CORS 适用于 API 请求,但不适用于我的 Nginx 配置中的媒体文件(例如 mp4、webm)?
- java - 如何使用哈希图数据类型在满足 ab = cd 且时间复杂度为 O(n²) 的数组中找到所有对 (a,b) 和 (c,d)
- typescript - 如何在量角器配置文件中全局导入 chai-as-promised
- azure - Azure-storage 静态网站访问权限
- c++ - 投射对基类的引用:标准行为?
- php - MySQL Join 子句算法