Flutter开发之实现沉浸式状态栏的效果

最新推荐文章于 2024-09-27 21:46:09 发布

xiayiye5

最新推荐文章于 2024-09-27 21:46:09 发布

阅读量1.9k

点赞数 1

分类专栏： Flutter学习文章标签：沉浸式状态栏 flutter沉浸式

本文链接：https://blog.csdn.net/xiayiye5/article/details/104863283

版权

本文介绍了在Flutter中如何利用MediaQuery的removePadding方法，通过设置removeTop: true实现沉浸式状态栏效果，并提供了在线效果图和demo源码下载链接。

摘要由CSDN通过智能技术生成

老套路线上效果图：

具体用到的是MediaQuery的removePadding方法里面的removeTop: true方法

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _imageUrl = [
    'http://pages.ctrip.com/commerce/promote/20180718/yxzy/img/640sygd.jpg',
    'https://dimg04.c-ctrip.com/images/700u0r000000gxvb93E54_810_235_85.jpg',
    'https://dimg04.c-ctrip.com/images/700c10000000pdili7D8B_780_235_57.jpg'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MediaQuery.removePadding(
        //移除状态栏关键属性
        removeTop: true,
        context: context,
        child: ListView