flutter如何修改手机最底部横条导航栏的颜色

flutter如何修改手机最底部横条导航栏的颜色

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 设置导航栏颜色
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // 导航栏背景颜色
    systemNavigationBarDividerColor: null, // 导航栏与页面之间的分割线颜色
    statusBarColor: Colors.transparent, // 状态栏颜色
    systemNavigationBarIconBrightness: Brightness.dark, // 导航栏图标颜色（暗色）
    statusBarIconBrightness: Brightness.dark, // 状态栏图标颜色（暗色）
    statusBarBrightness: Brightness.light, // 状态栏亮度（仅iOS有效）
  ));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

在Flutter中，如果你想修改Android设备最底部横条（通常指的是导航栏，包含返回、主页和最近应用按钮）的颜色，你可以使用SystemChrome类来设置系统级的UI变更。对于iOS设备，这个底部横条通常是指的是Home Indicator，它的颜色是根据状态栏的颜色自动调整的，无法直接通过Flutter API更改。

对于Android设备，你可以在你的Flutter应用中使用如下代码来改变导航栏的颜色：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 设置导航栏颜色
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // 导航栏背景颜色
    systemNavigationBarDividerColor: null, // 导航栏与页面之间的分割线颜色
    statusBarColor: Colors.transparent, // 状态栏颜色
    systemNavigationBarIconBrightness: Brightness.dark, // 导航栏图标颜色（暗色）
    statusBarIconBrightness: Brightness.dark, // 状态栏图标颜色（暗色）
    statusBarBrightness: Brightness.light, // 状态栏亮度（仅iOS有效）
  ));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

请注意，systemNavigationBarColor属性用于设置导航栏的背景颜色。上述代码应该放在应用启动之前执行，例如在main函数中，在调用runApp之前。

如果你想要动态地改变这些属性，你需要在一个StatefulWidget的setState方法中调用SystemChrome.setSystemUIOverlayStyle，以便触发用户界面更新。

另外，请注意不同版本的Android系统可能对这些设置有不同的表现，特别是Android 10（API level 29）引入了手势导航模式，它可能不会按照预期改变颜色。对于较新的Android版本，你可能还需要处理其他系统级的UI变更以确保一致的用户体验。