flutter App开发修改顶部通知栏样式

initNotification(){
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    // Brightness.light 状态栏字体颜色(白色)
    statusBarIconBrightness: Brightness.dark, // 状态栏字体颜色(黑色)
    statusBarColor: Colors.transparent, // 状态栏背景色
  ));
}

- `statusBarColor`:设置状态栏的背景颜色;
- `statusBarBrightness`:设置状态栏的亮度,可选的取值为 `Brightness.dark` 或 `Brightness.light`;
- `statusBarIconBrightness`:设置状态栏的图标亮度,可选的取值为 `Brightness.dark` 或 `Brightness.light`;
- `systemNavigationBarColor`:设置系统导航栏的颜色,仅在 Android 平台上生效;
- `systemNavigationBarDividerColor`:设置导航栏底部分隔线的颜色,仅在 Android 平台上生效;
- `systemNavigationBarIconBrightness`:设置系统导航栏按钮的颜色,可选的取值为 `Brightness.dark` 或 `Brightness.light`;
- `statusBarColor` 和 `systemNavigationBarColor` 参数还可以接受透明度属性,如 `Colors.white.withOpacity(0.5)`。

### MediaQuery 的基本概念 MediaQuery 是 Flutter 中的一个实用工具类,用于获取当前设备屏幕的信息,例如宽度、高度、像素密度 (DPI) 和方向等。它可以帮助开发者适配不同尺寸和分辨率的屏幕[^1]。 通过 `MediaQuery.of(context)` 方法可以访问上下文中封装的 `MediaQueryData` 对象,该对象包含了关于窗口大小和设备特性的数据。以下是常见的属性及其用途: - **size**: 返回一个 `Size` 对象,表示设备屏幕的有效显示区域(不包括状态栏的高度)。可以通过 `.width` 或 `.height` 获取具体的数值。 - **orientation**: 表示设备的方向,返回值为 `Orientation.portrait` 或 `Orientation.landscape`。 - **padding**: 描述应用外部不可用的空间,比如通知栏或刘海屏占据的部分。 - **textScaleFactor**: 文本缩放比例因子,默认情况下可能因用户的系统设置而变化。 ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('MediaQuery Example')), body: ScreenInfoWidget(), ), ); } } class ScreenInfoWidget extends StatelessWidget { @override Widget build(BuildContext context) { final Size screenSize = MediaQuery.of(context).size; final Orientation deviceOrientation = MediaQuery.of(context).orientation; return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Screen Width: ${screenSize.width}'), Text('Screen Height: ${screenSize.height}'), Text('Device Orientation: $deviceOrientation') ], ), ); } } ``` 上述代码展示了如何利用 `MediaQuery.of(context)` 来动态展示屏幕宽高以及设备方向[^2]。 ### 解决常见问题 #### 如何处理 SafeArea? 当涉及到带有顶部状态栏或其他遮挡物的设计时,可以直接使用 `SafeArea` 小部件来自动调整布局位置,或者手动读取 `MediaQuery.of(context).padding.top` 并将其应用于自定义设计中。 #### 性能优化注意事项 频繁调用 `MediaQuery.of(context)` 可能会增加不必要的开销,尤其是在复杂列表项渲染场景下。如果某些值在整个生命周期内不会改变,则建议缓存这些值以减少重复计算。 ### 响应式布局实现技巧 借助于 `LayoutBuilder` 结合 `MediaQuery` 能够轻松构建响应式的 UI 组件。下面是一个简单的例子演示根据不同屏幕宽度加载不同的组件结构: ```dart @override Widget build(BuildContext context) { return LayoutBuilder(builder: (context, constraints){ if(constraints.maxWidth > 600){ return LargeScreen(); }else{ return SmallScreen(); } }); } ``` 此方法允许应用程序依据实际可用空间灵活切换界面样式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值