首页 > 其他分享 >flutter中去除导航栏与状态栏

flutter中去除导航栏与状态栏

时间:2023-12-19 14:34:10浏览次数:27  
标签:SystemChrome SystemUiMode 状态栏 isFullScreen 全屏 去除 overlays flutter setEnabledSyst

方法一

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]);  //隐藏状态栏 上方黑边

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]); //隐藏导航栏

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);  // 隐藏状态栏和导航栏  上方黑板
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( //设置状态栏透明        statusBarColor: Colors.transparent,      ));

方法二(状态栏设置透明)

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();
  }
}

---

标签:SystemChrome,SystemUiMode,状态栏,isFullScreen,全屏,去除,overlays,flutter,setEnabledSyst
From: https://www.cnblogs.com/xbinbin/p/17898720.html

相关文章

  • flutter杂知识点
    child和children用于在一个容器小部件(如Container、Column、Row等)中放置一个或多个子小部件1.child属性用于容器只包含一个子小部件的情况;2.children属性用于容器包含多个子小部件的情况。Center小部件(居中、定位、多个方向上居中)Center小部件用于将其子小部件放置在父容器的......
  • Java、Kotlin、Flutter、HarmonyOS基本数据类型
    一.Java数据类型基本数据类型整型(byte、short、int、long)、浮点型(float、double)、字符型(char)和布尔型(boolean)1.1整数类型整型是Java中最基本的数据类型之一。它可以用来存储整数值,包括正数、负数和0。Java中的整型有四种类型:byte、short、int和long。byte:占用1个字节,范围从-128......
  • flutter屏幕适配方案
    使用MediaQuery和比例因子优点:使用简单,可以处理大多数情况下的屏幕适配需求。缺点:需要手动计算比例因子,并且随着UI元素变得更加复杂和层次化(例如多层次列表或动画效果),使用此方法可能会变得更加困难。import'package:flutter/material.dart';classMyAppextendsStatelessW......
  • flutter中显示年月日、星期与时间
    代码import'package:flutter/material.dart';import'package:intl/intl.dart';import'dart:async';import'package:intl/date_symbol_data_local.dart';//添加此行classDateWidgetextendsStatefulWidget{@override_......
  • flutter better_player 增加投屏按钮
    better_player播放器默认不可以修改UI需要增加投屏按钮则需要自定义UI但是自定义UI需要布局有需要定义手势动作还需要监听播放事件有没可能服用原来的一切仅仅增加一个投屏按钮呢?答案是肯定的第一步设置主题默认安卓和IOS我们设置自定义BetterPlayerControlsC......
  • Flutter使用SharedPreferences示例
    SharedPreferencesAndroid原生开发经常会用SharedPreferences来保存一些设置,Flutter用什么来保存这些设置呢?在Flutter中,你可以使用shared_preferences插件来实现类似Android原生开发中的SharedPreferences功能,用于在应用程序中保存和检索持久化的键值对。具体使用首先,在你的Fl......
  • flutter最新封装Dio
    import'dart:convert';import'package:becoin/Routers/Routes.dart';import'package:common_utils/common_utils.dart';import'package:dio/dio.dart';import'package:flutter/cupertino.dart';import'pac......
  • Flutter 自带的搜索组件
    效果如下官方需要重写四个关键方法classsearchBarDelegateextendsSearchDelegate<String>{/*这个方法返回一个控件列表,显示为搜索框右边的图标按钮,这里设置为一个清除按钮,并且在搜索内容为空的时候显示建议搜索内容,使用的是showSuggestions(context)方法:*/@overrid......
  • Flutter开发之安卓打包,和获取签名相关信息,公钥值相关操作
    我们Flutter开发中,难免有些小朋友因需求要获取打包签名的一些相关信息,下面我们来讲一下怎么获取一生成签名文件我们打包安卓APK包需要先生成签名文件,需运行以下指令,生成签名文件keytool-genkey-v-keystoreGMT\_keystore.keystore-aliasGMT\_keystore-keyalgRSA-keysi......
  • Flutter技术基础
    技术基础语法主要是用dart,dart就是js和java的组合体,变量的声明,类,继承,构造函数,setget方法,以_开头的变量通常表示为私有变量。这意味着这个变量或者方法只能在当前Dart文件中访问,而不能被其他文件访问。一些集合包如map、list、set等等会用到的数据结构2.包管理:配置文件pubs......