一统天下 flutter - UI: android 底部导航栏
一统天下 flutter - UI: android 底部导航栏
示例如下:
lib\ui\navigation_bar.dart
/*
* android 底部导航栏
*/
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class NavigationBarDemo extends StatefulWidget {
const NavigationBarDemo({Key? key}) : super(key: key);
@override
_NavigationBarDemoState createState() => _NavigationBarDemoState();
}
class _NavigationBarDemoState extends State<NavigationBarDemo> {
late ListView _listView;
late Widget _widget;
/// 显示 android 底部导航栏
void _navigationBarShow() {
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom] /// 显示状态栏,显示 android 底部导航栏
);
setState((){});
}
/// 隐藏 android 底部导航栏
void _navigationBarHide() {
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: [SystemUiOverlay.top] /// 显示状态栏,隐藏 android 底部导航栏
);
setState((){});
}
/// 有背景色的 android 底部导航栏
void _navigationBar1() {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.light.copyWith(
systemNavigationBarColor: Colors.blue, /// android 底部导航栏的背景色
)
);
_widget = _listView;
setState((){});
}
/// 透明的 android 底部导航栏且不占位
void _navigationBar2() {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.light.copyWith(
systemNavigationBarColor: Colors.transparent, /// android 底部导航栏的背景色
)
);
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.edgeToEdge /// 状态栏和 android 底部导航栏不占位
);
_widget = _listView;
setState((){});
}
Widget _item(String title, GestureTapCallback? onTap) {
return GestureDetector(
child: Container(
color: Colors.orange,
child: Text(
title,
style: const TextStyle(
decoration: TextDecoration.none,
color: Colors.white,
fontSize: 16,
),
),
),
onTap: onTap
);
}
@override
void initState() {
super.initState();
_listView = ListView(
scrollDirection: Axis.vertical,
itemExtent: 60,
children: [
_item("显示 android 底部导航栏", () {
_navigationBarShow();
}),
_item("隐藏 android 底部导航栏", () {
_navigationBarHide();
}),
_item("有导航栏,亮色文字和图标的状态栏,状态栏有背景且占位", () {
_navigationBar1();
}),
_item("有导航栏,暗色文字和图标的状态栏,状态栏有背景且占位", () {
_navigationBar2();
}),
for (var i = 0; i < 100; i++)
_item("item: $i", null),
],
);
_navigationBar1();
}
@override
Widget build(BuildContext context) {
return _widget;
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2012-03-22 稳扎稳打Silverlight(67) - 5.0被信任的应用程序之访问本地文件系统, 支持多窗口, 被信任的程序在浏览器中运行, Call Windows API