青岛建站费用培训报名

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

目录

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中实现背景图全屏显示时，需要注意以下几点：

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

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

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

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

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

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

三、简单案例实现

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 {@overrideWidget 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> {@overrideWidget 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。然而，由于网络原因，该链接可能无法正常加载图片。如果图片无法加载，可能是以下原因之一：

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

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