iOS(Safari)中的Flutter网页状态栏

hsgswve4  于 2023-05-01  发布在  Flutter
关注(0)|答案(3)|浏览(217)

我试图改变Safari浏览器中的状态栏,我搜索它,这是一个关于它的很多问题,但他们都没有解决我的问题。我试过change-status-bar-colorhow-to-change-chrome-header-color

这个蓝色区域在iPhone的凹槽周围,我想在整个应用程序中更改颜色。
谢谢您的关注。

bz4sfanl

bz4sfanl1#

您希望更改theme-color的值。您看到的默认颜色在web/manifest.json文件中定义。
您也可以将其设置为,例如,为您的浅色主题设置为白色,为您的深色主题设置为黑色,为您的web/index.html添加以下行:

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#000000">

您也可以通过dart:js动态更改它,方法是向web/index.html添加脚本:

<script>
  function setMetaThemeColor(color) {
      document.querySelector('meta[name="theme-color"]').setAttribute("content", color);
    }
</script>

然后通过dart:js调用它:

import 'package:flutter/material.dart';
import 'dart:js' as js;

extension ColorString on Color {
  String toHexString() {
    return '#${(value & 0xFFFFFF).toRadixString(16).padLeft(6, '0').toUpperCase()}';
  }
}

void setMetaThemeColor(Color color) {
  js.context.callMethod("setMetaThemeColor", [color.toHexString()]);
}
bejyjqdl

bejyjqdl2#

请尝试使用以下代码:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.red,
));
5lhxktic

5lhxktic3#

Flutter主通道

状态栏颜色可以根据SystemUiOverlayStyle进行更改。
查看提案以了解更多信息:https://github.com/flutter/flutter/issues/123365
查看合并请求以了解更多信息:https://github.com/flutter/engine/pull/40599
1.使用AppBar控件:

Scaffold(
  appBar: AppBar(
    systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.red),
  ),
)

1.使用AnnotatedRegion

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: const SystemUiOverlayStyle(statusBarColor: Colors.red),
    child: ...,
  );
}

1.通过代码调用SystemChrome.setSystemUIOverlayStyle

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarColor: Colors.red));

1.调用内部构建方法SystemChrome.setSystemUIOverlayStyle

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarColor: Colors.red));

  return ...;
}

Flutter稳定/开发通道

1.使用MaterialApp.color属性:

@override
Widget build(BuildContext context) {
  return const MaterialApp(
    color: Colors.red,
    home: ...,
  );
}

1.使用MaterialApp.theme.primaryColor属性:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData.light().copyWith(primaryColor: Colors.red),
    home: ...,
  );
}

相关问题