flutter - Flutter - 使用 SafeArea 的系统栏颜色
问题描述
我正在尝试为SafeArea
带有彩色系统栏的颤振应用程序添加小部件,但不知何故它们总是变黑。
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.light.copyWith(
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarColor: kSurfaceColor,
statusBarIconBrightness: Brightness.dark,
statusBarColor: Colors.red, // Note RED here
),
);
return SafeArea(
child: Scaffold(
backgroundColor: kWhiteColor,
appBar: _buildAppBar(context), // Title and Avatar are built here
body: _buildBody(), // This function just returns blank Container for now
floatingActionButton: _buildFAB(context),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
),
);
}
解决方案
基于@david-carrilho 的回答,我创建了这个简单的小部件
import 'package:flutter/material.dart';
class ColoredSafeArea extends StatelessWidget {
final Widget child;
final Color color;
const ColoredSafeArea({Key key, @required this.child, this.color})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: color ?? Theme.of(context).colorScheme.primaryVariant,
child: SafeArea(
child: child,
),
);
}
}
然后无论我在哪里使用 a SafeArea
,我都会使用我的小包装小部件ColoredSafeArea
。
class MyExampleView extends StatelessWidget {
const MyExampleView({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ColoredSafeArea(
child: Center(
child: Text('Nice color bar'),
),
);
}
}
之所以可行,是因为它会在您的内容后面创建一个具有指定颜色的容器,然后SafeArea
根据设备简单地添加必要的填充。
推荐阅读
- r - 使用 R 提取每个回归系数(1104 个线性回归)的 p 值列表
- python - 根据python中的输入计算下一个闰年
- excel - 如何将 Dyn365 中的数据导入 Excel
- css - 无法让 css 模块在 Typescript Storybook 项目中工作
- css - 如何使弹性方向行响应
- java - 无法在 IE 中使用 Xpath Selenium 找到元素
- python - 从 booster predict() 函数预测类标签
- javascript - 使用 jest 在 Promise 中测试异步函数
- python - 多边形裁剪图像python:如何更改蒙版颜色
- node.js - 将 Node.js 与 mongoDB 一起使用时,“insertMany”如何与 Mongoose 一起使用?