flutter中去除导航栏与状态栏
方法一
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]); //隐藏状态栏 上方黑边 SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]); //隐藏导航栏 SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []); // 隐藏状态栏和导航栏 上方黑板
方法二(状态栏设置透明)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent, // 设置AppBar为透明
elevation: 0, // 去除AppBar的阴影
),
body: Container(
// 这里是页面内容
),
),
);
}
}
展示如何通过点击屏幕来进入/退出全屏模式,并且在全屏模式下通过滑动屏幕来退出全屏
import 'dart:async'; // 导入使用Timer需要的库
import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // 导入使用SystemChrome需要的库 void main() {
runApp(MyApp()); // 运行应用程序
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo', // 设置应用程序的标题
home: Scaffold(
body: MyHomePage(), // 设置主页面为 MyHomePage 组件
),
);
}
} class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key); @override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
bool _isFullScreen = false; // 判断是否全屏 Timer? _timer; // 定时器 @override
void initState() {
super.initState(); // 初始化定时器,在每3秒钟检查一次是否需要退出全屏模式
_timer = Timer.periodic(Duration(seconds: 3), (timer) {
if (_isFullScreen) {
setState(() {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]);
_isFullScreen = false;
});
}
});
} @override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
if (_isFullScreen) {
// 如果已经全屏就退出全屏
setState(() {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]);
_isFullScreen = false;
});
} else {
// 如果不是全屏就进入全屏
setState(() {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive, overlays: []);
_isFullScreen = true;
});
}
},
onVerticalDragUpdate: (DragUpdateDetails details) {
if (_isFullScreen) {
// 如果是全屏就退出全屏
setState(() {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]);
_isFullScreen = false;
});
}
},
child: Container(
color: Colors.white, // 设置容器背景颜色为白色
child: Center(
child: Text('点击屏幕进入全屏,滑动屏幕退出全屏'), // 在屏幕中央显示文本
),
),
);
} @override
void dispose() {
_timer?.cancel(); // 取消定时器
super.dispose();
}
}
---
flutter中去除导航栏与状态栏的更多相关文章
- Flutter布局--appbar导航栏和状态栏
MaterialApp 先看下上图的具体用法:1. title:标题2. actions:表示右侧的按钮的动作3. leading:表示左侧的按钮的动作4. flexibleSpace:5. back ...
- zhuang 定制iOS 7中的导航栏和状态栏
近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外观上有大量的改动.从开发者的角度来看,导航栏和状态栏就发生了明显的变化.状态栏现在是半透明的了,这也就意味着导航栏 ...
- iOS 7 教程:定制iOS 7中的导航栏和状态栏
目录(?)[-] iOS 7中默认的导航栏 设置导航栏的背景颜色 在导航栏中使用背景图片 定制返回按钮的颜 修改导航栏标题的字体 修改导航栏标题为图片 添加多个按钮 修改状态栏的风格 隐藏状态栏 总结 ...
- (转)定制iOS 7中的导航栏和状态栏
近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外观上有大量的改动.从开发者的角度来看,导航栏和状态栏就发生了明显的变化.状态栏现在是半透明的了,这也就意味着导航栏 ...
- 定制iOS 7中的导航栏和状态栏
本文转载至 http://www.cocoachina.com/industry/20131104/7287.html 跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外 ...
- iOS去除导航栏和tabbar的1px横线
1.在自己定义的导航栏中或者设计稿中经常需要去除导航栏的1px横线,主要是颜色太不协调了 去除之前的图片 要去除这1px的横线,首先应该知道它是什么,在Xcode的界面调试中可以看到,它其实是UIIm ...
- 【转】iOS中设置导航栏标题的字体颜色和大小
原文网址:http://www.360doc.com/content/15/0417/11/20919452_463847404.shtml iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参 ...
- Android 4.4 上实现透明导航栏和状态栏 Translucent system bar
Translucent system UI styling To get the most impact out of your content, you can now use new window ...
- iOS中设置导航栏标题的字体颜色和大小
iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参考下. 在平时开发项目的时候,难免会遇到修改导航栏字体大小和颜色的需求,一般使用自定义视图的方法,其实还存在一种方法. 方法一:(自定义视图的 ...
- Android 动态隐藏显示导航栏,状态栏
Talk is cheap, show me the code. --Linus Torvalds Okay, here: 一.导航栏: [java] view plain copy private ...
随机推荐
- PostgreSQL主备库搭建
pg主备库的搭建,首先需在2个节点安装pg软件,然后依次在2个节点配置主备. 本文采用os为CentOS7.6,pg版本使用14.2,以下为详细部署步骤. 本文两个节点的ip地址如下: [root@n ...
- React跨路由组件动画
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:佳岚 回顾传统React动画 对于普通的 React 动画 ...
- 【KMP】border 题解
题目描述 输入 输出 样例输入 abaabaa 样例输出 17 样例解释: f[2][a] = 1 f[3][a] = 1 f[4][a] = 1 f[4][b] = 2 f[5][a] = 1 f[ ...
- idea的git插件,可以显示每一行代码的git版本记录,很好用
再给大家推荐一款idea的git插件----GitToolBox,可以显示每一行代码的git版本记录,很好用 效果图如下 可以在光标所在行代码的后面显示git的版本记录信息(提交的用户名,提交的时间等 ...
- AtCoder Beginner Contest 327 (ABC327)
A. ab 直接根据题意模拟即可. Code B. A^A 直接枚举 \(i= 1, 2,\dots, 15\),每次看看 \(i ^ i\) 是否等于 \(A\) 即可. Code C. Numbe ...
- Java JDBC连接数据库的CURD操作(JDK1.8 + MySQL8.0.33 + mysql-connector-java-8.0.27-bin驱动)
JDBC概述 JDBC(Java Database Connectivity)是一个独立于特定数据库管理系统.通用的SQL数据库存取和操作的公共接口(一组API),定义了用来访问数据库的标准Java类 ...
- AcWing100 IncDec Sequence
求出\(a\)的差分序列\(b\),其中\(b_1 = a_1, b_2 = a_2 - a_1, ... b_n = a_n - a_{n - 1}\) 根据题意以及公式可以发现,如果我们想让序列所 ...
- 普冉PY32系列(十) 基于PY32F002A的6+1通道遥控小车I - 综述篇
目录 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境 普冉PY32系列(三) P ...
- 【免费】小傅哥 DDD 开发小册
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 大家好,我是技术UP主小傅哥. 如果在面试的时候,面试官问你DDD是什么,你怎么解释?是不是感 ...
- Java程序员必备技能:Collections工具类深度解析!
在之前的文章中,我们学习了单列集合的两大接口及其常用的实现类:在这些接口或实现类中,为我们提供了不少的实用的方法. 本篇文章我们来介绍一种java开发者为我们提供了一个工具类,让我们更好的来使用集合 ...