首页 > 解决方案 > 系统状态栏和AppBar消失时如何防止屏幕调整大小?

问题描述

我希望屏幕像 Twitter 图像查看屏幕,您可以在其中点击,除图片外,其他所有内容都将被隐藏。当状态栏在我的情况下隐藏时,屏幕会自行调整大小,从而将所有内容向上或向下拉以再次适应它。我已经删除了 AppBar 并制作了一个堆栈小部件来减少这种调整大小。但即使是堆栈小部件仍然会使图像/小部件自行调整大小。此外,动画似乎直到状态栏完成动画后才会触发。

我的代码:

class BiggerPictureScreen extends StatefulWidget {

  final List<FileData> images;
  final int index;
  const BiggerPictureScreen({Key? key, required this.images, this.index=0}) : super(key: key);

  @override
  _BiggerPictureScreenState createState() => _BiggerPictureScreenState();
}

class _BiggerPictureScreenState extends State<BiggerPictureScreen> {
  bool activate = false;
  double myOpacity=1.0;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.grey.withOpacity(0.7),
        extendBodyBehindAppBar: true,
        //appBar: _appBar,
        body: _myBody,
      ),
      onTap: (){
        setState(() {
          if(activate){
            print(activate);
            myOpacity = 0.0;
            SystemChrome.setEnabledSystemUIOverlays ([]);
          }
          else{
            print(activate);
            myOpacity = 1;
            SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
            //SystemChrome.setEnabledSystemUIOverlays ([]);
          }
        });
        activate=!activate;
      },
    );
  }
  get _appBar{
    return PreferredSize(
      preferredSize: activate? Size.fromHeight(kToolbarHeight) : Size(0, 0),
      child: AnimatedOpacity(
        duration: Duration(milliseconds: 300),
        opacity: myOpacity,
        child: AppBar(
        backwardsCompatibility: false,
        backgroundColor: Colors.blue, elevation: 0,
        title: Text("hi",),
      ),),
    );
  }
  get _myBody{
    return Stack(
      children:[
        Column(
        children: [
          _carousel(),
        ],
      ),
      Align(
        alignment: Alignment(0.0, -0.8),
        child: AnimatedOpacity(
          duration: Duration(milliseconds: 200),
          opacity: myOpacity,
          child: Container(
            child: Row(
              children: [
               Icon(Icons.arrow_back, color: Colors.white,),
              ],
            ),
          ),
        ),),
      ]
    );
  }
  _carousel(){
    return  Container(
      width: Get.width,
      height: Get.height*0.7,
      child: CarouselSlider(
        items: fileDataList(),
        options: CarouselOptions(
          initialPage: widget.index,
          viewportFraction: 1,
          autoPlay: false,
        ),
      ),
    );
  }
  fileDataList(){
    return widget.images.map((e) {
      return Center(
        child: Container(
          padding: EdgeInsets.fromLTRB(0, 0, 100, 100),

          decoration: BoxDecoration(
              color: Colors.orange[200],
              image: DecorationImage(
                image: (e.url.isEmpty)
                    ? AssetImage("assets/images/549.png")
                    : NetworkImage(e.url) as ImageProvider,
                fit: BoxFit.cover,
              )),
        ),
      );
    }).toList();
  }
}

标签: flutterflutter-layout

解决方案


推荐阅读