美文网首页FlutterFlutter
[Flutter 实战] 设置沉浸式状态栏(Status Bar

[Flutter 实战] 设置沉浸式状态栏(Status Bar

作者: 寅丁 | 来源:发表于2019-05-16 10:50 被阅读0次

    在此记录项目中所遇到问题及解决方案

    1. 全局设置

    import 'package:flutter/material.dart';
    import 'dart:io';
    import 'package:flutter/services.dart';
    
    void main(){
      runApp(MyApp());
    
      if(Platform.isAndroid){
        SystemUiOverlayStyle style = SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          ///这是设置状态栏的图标和字体的颜色 
          ///Brightness.light  一般都是显示为白色
          ///Brightness.dark 一般都是显示为黑色
          statusBarIconBrightness: Brightness.light
        );
        SystemChrome.setSystemUIOverlayStyle(style);
      }
    }
    

    2. 单个页面设置

    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    class test extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
        return Text('Body');
      }
    }
    

    单个页面设置时未解决的问题:

    设置AppBar之后,这行代码会失效SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    class test extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
        return Scaffold(
          appBar: AppBar(
            title: Text('Title'),
          ),
        );
      }
    }
    
    

    2019-06-11 补:
    看了app_bar.dart 源码,发现既然是取反,难怪一直没有效果。

        final Brightness brightness = widget.brightness
          ?? appBarTheme.brightness
          ?? themeData.primaryColorBrightness;
        final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
          ? SystemUiOverlayStyle.light
          : SystemUiOverlayStyle.dark;
    

    所以如果想要Status Bar是亮色,就要设置AppBar 的 brightness 为 Brightness.dark

    Scaffold(
            appBar: AppBar(brightness: Brightness.dark)
    )
    

    相关文章

      网友评论

        本文标题:[Flutter 实战] 设置沉浸式状态栏(Status Bar

        本文链接:https://www.haomeiwen.com/subject/byybaqtx.html