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中实现背景图全屏显示时，需要注意以下几点：
图片链接有效性：确保使用的图片链接是可访问的，否则图片无法加载。
图片填充方式：使用
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 {@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。然而，由于网络原因，该链接可能无法正常加载图片。如果图片无法加载，可能是以下原因之一：
链接无效：请检查图片链接是否正确，确保链接指向的图片是可访问的。
网络问题：如果链接正确但图片仍无法加载，可能是网络连接问题。建议重试或检查网络设置。
