flutter 如何在iOS上更改状态栏文本颜色

sqougxex  于 2023-04-22  发布在  Flutter
关注(0)|答案(9)|浏览(413)

我是新的所有这些Flutter的事情.我到处寻找这个小问题的解决方案.有没有办法改变状态栏的颜色?此外,当我使用的颜色像colors.blue我可以看到,在状态栏中的文字质量不好.
谢谢

appBar: AppBar(
    elevation : 0.0,
    leading: IconButton(
      icon: Icon(Icons.menu),
      tooltip: 'Navigation menu',
      onPressed: null,
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.search),
        tooltip: 'Search',
        onPressed: null,
      ),
    ],
  ),
hgtggwj0

hgtggwj01#

Flutter 2.5后编辑:

亮度不再使用,请改用systemOverlayStyle。

appBar: new AppBar(
      title: new Text(widget.title),
      systemOverlayStyle: SystemUiOverlayStyle.dark // or use SystemUiOverlayStyle.light
    ),

旧答案:

@Antoine基本上你可以设置你的主题亮度,或者你可以使用以下方法手动覆盖应用栏亮度:

appBar: new AppBar(
  title: new Text(widget.title),
  brightness: Brightness.light, // or use Brightness.dark
),

请注意,这只会在白色和黑色状态文本颜色之间切换。
.dark将使状态栏文本白色,而.light将使状态栏文本黑色
也许是一个更自定义的颜色,像评论说,你可以查看SystemChrome类。

vmpqdwk3

vmpqdwk32#

当我不使用AppBar时,可以使用AnnotatedRegion更改颜色。

import 'package:flutter/services.dart';

...    

Widget build(BuildContext context) {
   return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
         value: SystemUiOverlayStyle.light,                
         child: ...,
      ),
   );
}
nwsw7zdq

nwsw7zdq3#

对于iOS和Android:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
   statusBarColor: Colors.white, // Color for Android
   statusBarBrightness: Brightness.dark // Dark == white status bar -- for IOS.
));
sulc1iza

sulc1iza4#

AnnotatedRegion可帮助您更改iOS上的状态栏文本颜色。

import 'package:flutter/services.dart';
...    

Widget build(BuildContext context) {
   return AnnotatedRegion<SystemUiOverlayStyle>(
         value: SystemUiOverlayStyle.dark,                
         child: ...,
   );
}

但是如果你在Scaffold中有AppBar,那么只有AnnotatedRegion不能工作。

Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark, // play with this
      child: Scaffold(
        appBar: AppBar(
          brightness: Brightness.light, // play with this
        ),
        body: Container(),
     );
  }
nnsrf1az

nnsrf1az5#

不要使用AnnotatedRegion

应用不应使用自己的[AnnotatedRegion]封装AppBar。
你应该用途:

AppBar(
  backwardsCompatibility: false,
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)
a1o7rhls

a1o7rhls6#

@Antoine这个问题让我很头疼。我使用statusbarColor插件https://pub.dartlang.org/packages/flutter_statusbarcolor将状态栏颜色更改为黑色。然后我将appbar亮度设置为深色,因为它是深色背景。

import 'package:flutter/material.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
import 'package:flutter/services.dart';

void main() async{

  try {
    await FlutterStatusbarcolor.setStatusBarColor(Colors.black);
  }  catch (e) {
    print(e);
  }

  runApp(MaterialApp(
    title: 'Using Keys',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      primaryColor: Colors.white

    ),
    home: InputBox(),
  ));
}

class InputBox extends StatefulWidget {
  @override
  _InputBoxState createState() => _InputBoxState();
}

class _InputBoxState extends State<InputBox> {
  bool loggedIn = false;
  String _email, _username, _password;

  final scaffoldKey = GlobalKey<ScaffoldState>();     //a key for the state of the scaffold
  final formKey = GlobalKey<FormState>();             //a key for the state of the form

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        //backgroundColor: Colors.white,
        centerTitle: false,
        brightness: Brightness.dark,
        title: Text("Using Keys",
            style: TextStyle(
              fontSize: 24.0,
            )),
        elevation: 4.0,
      ),
    );
  }
}
r8xiu3jd

r8xiu3jd7#

Android也有答案。
如果需要在状态栏中显示黑色文本,请调用此函数:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
   statusBarColor: Colors.transparent, // optional
));

如果需要状态栏中的白色文本,请调用此命令:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
   statusBarColor: Colors.transparent, // optional
));

因为 statusBarBrightness 参数仅在iOS上有效

1dkrff03

1dkrff038#

我在不同的屏幕上有不同的状态栏颜色时遇到了麻烦。我使用的是长条,亮度(影响状态栏颜色)可以在SliverAppBars中以与普通AppBars相同的方式设置。

SliverAppBar(
  brightness: Brightness.light, //or Brightness.dark
  //...
);

SliverAppBar的亮度如果为null,则默认为AppBarTheme.brightness、ThemeData.appBarTheme或ThemeData.primaryColorBrightness,如果其中任何一个为null,则按此顺序。
设置AppBarTheme.brightness的示例:

MaterialApp(
  //...
  theme: ThemeData(
    appBarTheme: AppBarTheme(brightness: Brightness.dark),
  ),
  //...
);
htzpubme

htzpubme9#

我们可以使状态栏变暗:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

或光:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

相关问题