当前位置：首页 > news >正文

Flutter 学习之旅之 flutter 全屏背景图设置功能的简单实现

news 来源：原创 2025/5/25 3:10:14

Flutter 学习之旅之 flutter 全屏背景图设置功能的简单实现

一、简单介绍

二、Flutter 背景图全屏显示

三、简单案例实现

四、关键代码

一、简单介绍

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。

Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。

二、Flutter 背景图全屏显示

Flutter 背景图全屏显示是指在 Flutter 应用中，通过设置 Container 的 decoration 属性，使用 DecorationImage 将一张图片作为背景，并通过 BoxFit.cover 使图片覆盖整个屏幕。同时，设置 Scaffold 的 backgroundColor 为透明，确保背景图显示完整。

在Flutter中实现背景图全屏显示时，需要注意以下几点：

图片链接有效性：确保使用的图片链接是可访问的，否则图片无法加载。

图片填充方式：使用BoxFit.cover时，图片可能会被裁剪以适应屏幕，可能会影响图片的显示效果。

透明度设置：Scaffold的backgroundColor需设置为透明，否则背景图会被遮挡。

系统UI设置：如果需要全屏显示，需使用SystemChrome隐藏状态栏和导航栏。

性能优化：加载大图片可能影响性能，建议使用合适的图片尺寸和格式。

适配不同设备：不同设备屏幕比例不同，背景图显示效果可能有所差异，需测试适配。

三、简单案例实现

1、这里使用 Android Studio 进行创建 Flutter 项目

2、创建一个 application 的 Flutter 项目

3、创建的工程结构如下

4、编写代码，先简单实现一个背景图添加

5、连接设备，运行效果如下

6、其中发现标题栏和底部没有，还是没有全屏显示，继续编写代码，标题和底部进行处理

7、连接设备，运行代码，效果如下

四、关键代码

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

void main() {
  runApp(MyApp());
  // 设置系统UI的样式，将状态栏颜色设置为透明
  SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
  SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  // 设置全屏模式，隐藏状态栏和导航栏
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
}

/// 主应用程序类，继承自 [StatelessWidget]，用于初始化应用。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 应用的标题
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主题颜色，使用蓝色作为主色调
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'), // 应用的首页
    );
  }
}

/// 首页类，继承自 [StatefulWidget]，用于创建有状态的首页。
class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title}); // 构造函数，接收标题参数
  final String title; // 页面标题

  @override
  _MyHomePageState createState() => _MyHomePageState(); // 创建状态对象
}

/// 首页的状态类，继承自 [State]，用于管理首页的状态。
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
              'https://pic.88tph.com/production/20180914/13103514-0.jpg'), // 图片链接
          fit: BoxFit.cover, // 图片填充方式，覆盖整个容器
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent, // 把 Scaffold 的背景色改成透明
        appBar: AppBar(
          backgroundColor: Colors.transparent, // 把 AppBar 的背景色改成透明
          title: Text(widget.title, style: TextStyle(color: Colors.white)), // 使用传入的标题，设置文字颜色为白色
          elevation: 0, // 去掉 AppBar 的阴影
        ),
        body: Center(
          child: Text('Hello World'), // 页面中心显示文本
        ),
      ),
    );
  }
}

代码说明：

_MyHomePageState 是首页的状态类，继承自 State。

使用 Container 设置背景图，图片通过 NetworkImage 加载，并设置为覆盖整个容器。

使用 Scaffold 创建页面结构，将背景色设置为透明，使背景图显示出来。

AppBar 也设置为透明，去掉阴影，并将标题文字颜色设置为白色。

页面中心显示文本 "Hello World"。

在代码中，我将图片链接中的HTML标签移除，直接使用纯链接 https://pic.88tph.com/production/20180914/13103514-0.jpg。然而，由于网络原因，该链接可能无法正常加载图片。如果图片无法加载，可能是以下原因之一：

链接无效：请检查图片链接是否正确，确保链接指向的图片是可访问的。

网络问题：如果链接正确但图片仍无法加载，可能是网络连接问题。建议重试或检查网络设置。