我正在尝试添加SafeArea
带有彩色系统栏的 flutter 应用程序的小部件,但不知何故它们总是变黑。
@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,
),
);
}
This is what I see
If I wrap SafeArea
inside a Container
with color
property set to white, it works but system bar icons also turn white
基于 @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,
),
);
}
}
然后无论我在哪里使用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
只需根据设备添加必要的填充即可。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)