Flutter AppBar统一样式抽取

最新推荐文章于 2024-11-11 16:10:28 发布

原创

最新推荐文章于 2024-11-11 16:10:28 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #dart #AppBar #标题栏

本文介绍了如何在App中通过统一代码实现Android和iOS平台的状态栏和自定义标题栏样式，包括设置透明状态栏、图标颜色，并展示了关键代码片段。

为了便于App的管理，统一主题风格，需要统一自定义标题栏和状态栏，效果如下：

一、页面使用

void main() {
  //定义状态栏
  if (Platform.isAndroid) {
    SystemUiOverlayStyle _style = const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, //设置状态栏背景颜色
      //statusBarIconBrightness: Brightness.light, //设置图标颜色
    );
    SystemChrome.setSystemUIOverlayStyle(_style);
  }
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
  	//使用
    return const TitleBar(
      title: '首页',
      body: Home(),
    );
  }
}