Flutter中导航栏和状态栏设置成透明

一、Flutter 透明状态栏设置

import 'package:flutter/material.dart';
//导入对应的文件
import 'package:flutter/services.dart';



void main() {
  //配置透明的状态栏
  SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(statusBarColor: Colors.transparent);
  SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

  runApp(
        ......
        
  );
}

二、Flutter 透明顶部导航

通过 backgroundColor: Colors.transparent 结合 elevation: 0 可以实现透明导航,要实现透明 

浮动导航的话可以使用定位

Positioned( 
          top: 0, 
          left: 0, 
          right: 0, 
          child: AppBar( 
                title: const Text('CategoryView'), 
                centerTitle: true,
                backgroundColor: Colors.transparent, 
                elevation: 0, //消除阴影 
                        )
             )

猜你喜欢

转载自blog.csdn.net/eastWind1101/article/details/131335285