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

最新推荐文章于 2024-05-10 09:43:56 发布

~废弃回忆 �༄

最新推荐文章于 2024-05-10 09:43:56 发布

阅读量1.2k

点赞数

分类专栏： Flutter 文章标签： flutter Flutter中导航栏透明 Flutter中状态栏设置透明

本文链接：https://blog.csdn.net/eastWind1101/article/details/131335285

版权

Flutter 专栏收录该内容

67 篇文章 19 订阅

订阅专栏

一、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, //消除阴影 
                        )
             )