如何让图片适合flutter中的状态栏背景？

Question

我正在尝试在 flutter 项目中的状态栏背景中应用图像。那么哪个小部件可以帮助我应用以下预期结果。

详细页面.dart

import 'package:flutter/material.dart';

class MyDetailPage extends StatefulWidget {
  @override
  _MyDetailPageState createState() => _MyDetailPageState();
}

class _MyDetailPageState extends State<MyDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            height: 300,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/image2.png"),
                fit: BoxFit.fitHeight,
              ),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

使用脚手架属性

extendBodyBehindAppBar: true,

和 设置

statusBarColor: Colors.transparent 

此代码用于状态栏颜色。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.transparent
    ));

这是我当前项目中的代码示例。

  @override
  Widget build(BuildContext context) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.transparent
    ));
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Column(
        children: [
          Container(
            height: 250,
            child: Container(
              child: Stack(
                alignment: Alignment.topLeft,
                children: [
                  Container(
                    width: screenWidthPercentage(context,percentage: 1),
                    child: Image.network(
                      contentImage,
                      fit: BoxFit.cover,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 48.0,left: 12),
                    child: Icon(Icons.arrow_back,color: Colors.white,),
                  ),
                ],
              ),
            ),
          ),
     
        ],
      ),
    );
  }
}

Answer 2

您可以通过不保留 SafeArea 小部件并将状态栏颜色设置为透明来做到这一点。

我创建了一个示例，如下所示。

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

class FullScreen extends StatefulWidget {
  const FullScreen({Key? key}) : super(key: key);

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

class _FullScreenState extends State<FullScreen> {
  @override
  void initState() {
    super.initState();
    SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            statusBarIconBrightness: Brightness.light
          //color set to transperent or set your own color
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: buildBody(),
    );
  }

  Widget buildBody() {
    return SizedBox(
      height: 400,
      width: double.infinity,
      child: Card(
        clipBehavior: Clip.antiAlias,
        margin: EdgeInsets.all(0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(40),
              bottomRight: Radius.circular(40)),
        ),
        child: Image.network(
          'https://source.unsplash.com/random',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

我添加了卡片，因为它为图像提供了很好的海拔效果😎。 仅供参考，如果您使用卡，请将卡中的保证金保留为 0。

Answer 3

您可以使用

FlexibleSpaceBar

来实现它，这里是示例代码。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 300,
          flexibleSpace: FlexibleSpaceBar(
            background: Image.asset("assets/images/chocolate.jpg", fit: BoxFit.cover),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(title: Text("Item ${index}")),
            childCount: 100,
          ),
        ),
      ],
    ),
  );
}

Answer 4

当我们在顶树上使用

ListView

时，

即使没有 SafeArea，ListView 也会默认设置 padding.top。

所以我们需要一个

padding: EdgeInsets.zero

。

Answer 5

尝试了所有答案，但要么它只适用于 iOS，要么它们在脚手架中提出了反对脚手架的建议（请访问Flutter 应用程序中每个页面的多个脚手架）。

解决方案是使用SystemChrome.setSystemUIOverlayStyle。

Widget build(BuildContext context) {
    setBrightnessWithoutAppBar(context, AppColors.transparent, Brightness.light); //look this
     return Scaffold(
       extendBodyBehindAppBar: true,
       body: Stack(children: [
         Positioned(
           top: 0,
           child: Container(
             width: MedSize.widthPhysical,
             height: MedSize.heightPhysical * 0.7.byUI(true),
             decoration: const BoxDecoration(
               image: DecorationImage(
                 image: AssetImage('assets/images/jesus/lovesYou.jpg'),
                 fit: BoxFit.fitWidth,
               )

在一些新文件中，您可以使用您的方法：

SystemUiOverlayStyle setBrightnessWithoutAppBar(BuildContext context, Color backgroundColor, Brightness brightness) {
  SystemUiOverlayStyle style = SystemUiOverlayStyle(
    statusBarColor: backgroundColor,
    statusBarIconBrightness: brightness,
    statusBarBrightness: brightness,
  );
  SystemChrome.setSystemUIOverlayStyle(style);
  return style;
}

在我看来，直到Flutter版本3.12，在Android上使用AppBar，即使高度为0，也会与body重叠，即使使用

forceMaterialTransparency = true

- 当然，关于图像的使用。