FlutterFlutter

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

2019-05-16  本文已影响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)
)
上一篇下一篇

猜你喜欢

热点阅读