时间戳

首页 > 解决方案 > 在 Flutter 中将底部系统导航栏设置为透明不起作用

android - 在 Flutter 中将底部系统导航栏设置为透明不起作用

问题描述

我正在尝试将 Flutter 中的 Android 底部系统导航栏设置为透明。如果我设置颜色，它会按预期工作。一旦我尝试将系统导航栏设置为透明，就会出现一个灰色栏。对于 StatusBar，它运行良好。

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

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
  ));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestApp(),
    );
  }
}

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      backgroundColor: Color(0xFFE76098),
      body: Container(
          ),
    );
  }
}

这个导航栏

标签： androidflutter

解决方案

只需用 Widget 包装您NavigationBar的OpacityWidget。这是一个例子：

Opacity(
opacity: 0.5, 
child: YourNavigationBar(),
),

您可以将opacity参数从 0 更改为 1，0 表示完全不可见，1 表示可见。我使用了 0.5，所以它将是半可见的；）。

推荐阅读