一? 效果展示：

?1. 圖片展示：

??????

?

2.混色，平鋪，拉伸，原圖展示

????????

? ? ??

二? 實(shí)驗(yàn)準(zhǔn)備：

? ? 1.在包結(jié)構(gòu)中創(chuàng)建images包來存放我們用到的圖片，在pubspec.yaml中聲明路徑：

? ? 2.?檢查虛擬機(jī)是否正常運(yùn)行：

三? 詳細(xì)設(shè)計(jì)：

大體流程：

特別注意：

我們創(chuàng)建繼承自State的_MyHomePageState類的用處是

1. 狀態(tài)管理： State 對(duì)象是與 StatefulWidget 相關(guān)聯(lián)的狀態(tài)的持有者。通過繼承自State，可以在這個(gè)對(duì)象中存儲(chǔ)和管理與用戶界面相關(guān)的數(shù)據(jù)。

2. 生命周期方法： State 類提供了一系列生命周期方法，例如 initState、didUpdateWidget、build、dispose 等。這些方法允許在不同階段執(zhí)行特定的操作，例如在初始化狀態(tài)、更新部件時(shí)、構(gòu)建部件樹、銷毀狀態(tài)等。

3. 動(dòng)態(tài)更新： 通過調(diào)用 setState 方法，可以通知Flutter框架重新構(gòu)建UI。這使得在用戶與應(yīng)用交互時(shí)，能夠根據(jù)狀態(tài)的變化動(dòng)態(tài)更新UI，提供交互性和實(shí)時(shí)性。

4. 保存和恢復(fù)狀態(tài)： State 對(duì)象可以保存和恢復(fù)其狀態(tài)。這對(duì)于在應(yīng)用生命周期內(nèi)保留數(shù)據(jù)狀態(tài)，以及在設(shè)備方向切換或應(yīng)用關(guān)閉后恢復(fù)狀態(tài)非常有用。

5. 構(gòu)建UI： build 方法是構(gòu)建用戶界面的地方。通過覆蓋 build 方法，可以定義在狀態(tài)更改時(shí)如何構(gòu)建和渲染UI。

6. 數(shù)據(jù)封裝： 將相關(guān)的狀態(tài)和邏輯封裝在State類中有助于提高代碼的組織性和可讀性。這樣，每個(gè)部件的狀態(tài)都可以獨(dú)立管理，降低了代碼的復(fù)雜度。

7. 優(yōu)化性能： State 對(duì)象的狀態(tài)是惰性創(chuàng)建的，當(dāng)部件首次插入到樹中時(shí)，State 對(duì)象才會(huì)被創(chuàng)建。這有助于優(yōu)化應(yīng)用性能。

class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}

功能實(shí)現(xiàn)：

功能一：圖片展示:

組件:

Container: 用于創(chuàng)建包含圖片的容器。

Scaffold: 提供應(yīng)用程序的基本結(jié)構(gòu)，包括主體區(qū)域。

Column: 用于在垂直方向上排列不同的小部件。

屬性和方法:

Container的width和height屬性: 設(shè)置容器的寬度和高度。

Container的color屬性: 設(shè)置容器的背景顏色。

Container的child屬性: 設(shè)置容器中包含的子部件。

DecorationImage的image屬性: 設(shè)置Image.asset的圖片來源。

DecorationImage的repeat屬性: 設(shè)置圖片在容器中的重復(fù)方式。

Container imgContainer = Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height / 3,color: Colors.amberAccent,child: Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage(lists[index]),repeat: ImageRepeat.repeat,),),),
);

功能二：效果選擇 :

組件:

RadioListTile: 用于顯示單選列表項(xiàng)。

屬性和方法:

value屬性: 表示當(dāng)前選項(xiàng)的值。

groupValue屬性: 表示所在組的當(dāng)前選中值。

title屬性: 列表項(xiàng)的主要文本。

subtitle屬性: 列表項(xiàng)的副標(biāo)題文本。

onChanged回調(diào): 在用戶選擇該項(xiàng)時(shí)觸發(fā)的函數(shù)。

RadioListTile(value: 0,groupValue: selected,title: Text('混色'),subtitle: Slider(value: colorsValue,min: 0,max: 255,onChanged: (value) {setState(() {colorsValue = value;});},),onChanged: (value) {setState(() {selected = value ?? 0;});},
);

功能三：混色效果 :

組件:

Container: 用于包裹混色效果的圖片。

ColorFiltered: 用于應(yīng)用顏色混合效果。

屬性和方法:

colorFilter屬性: 設(shè)置ColorFiltered的顏色混合濾鏡。

Color.fromARGB方法: 創(chuàng)建一個(gè)顏色對(duì)象。

round()方法: 將浮點(diǎn)數(shù)四舍五入為最接近的整數(shù)。

ColorFiltered(colorFilter: ColorFilter.mode(Color.fromARGB(255, colorsValue.round(), colorsValue.round(), colorsValue.round()),BlendMode.colorDodge,),child: Image.asset(lists[index]),
);

功能四：平鋪效果:

組件:

Container: 用于包裹平鋪效果的圖片。

屬性和方法:

DecorationImage的repeat屬性: 設(shè)置圖片在容器中的重復(fù)方式。

round()方法: 將浮點(diǎn)數(shù)四舍五入為最接近的整數(shù)。

Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height / 3,color: Colors.amberAccent,child: Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage(lists[index]),repeat: ImageRepeat.repeat,),),),
);

功能五：顏色調(diào)整:

組件:

Slider: 用于提供滑動(dòng)條以調(diào)整顏色值。

屬性和方法:

value屬性: 表示當(dāng)前滑塊的值。

min和max屬性: 設(shè)置滑塊的最小和最大值。

onChanged回調(diào): 在滑動(dòng)條值變化時(shí)觸發(fā)的函數(shù)。

Slider(value: colorsValue,min: 0,max: 255,onChanged: (value) {setState(() {colorsValue = value;});},
);

功能六：圖片切換 :

組件:

ElevatedButton: 用于顯示提升的按鈕。

屬性和方法:

onPressed回調(diào): 在按鈕被點(diǎn)擊時(shí)觸發(fā)的函數(shù)。

ElevatedButton(child: Text('向前'),onPressed: () {setState(() {if (index > 0) index--;});},
);
ElevatedButton(child: Text('向后'),onPressed: () {setState(() {if (index < lists.length - 1) index++;});},
),

功能七：拉伸圖片

組件：

Container 組件：

用途： 用于創(chuàng)建一個(gè)矩形的可視容器，可以包含子組件，并設(shè)置容器的樣式和尺寸。

相關(guān)屬性：

width：容器的寬度，設(shè)置為屏幕的寬度。

height：容器的高度，設(shè)置為屏幕高度的三分之一。

color：容器的顏色，設(shè)置為 Colors.amberAccent

Image.asset 組件：

用途： 用于顯示應(yīng)用內(nèi)的圖片資源。

相關(guān)屬性：

lists[index]：圖片的路徑，從預(yù)定義的列表中選擇。

fit：用于指定圖片的填充方式，這里設(shè)置為 BoxFit.fill，表示填充整個(gè)容器。

mgContainer = Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height / 3,color: Colors.amberAccent,child: Image.asset(lists[index],fit: BoxFit.fill,),);

四 完整代碼

import 'package:flutter/material.dart';
void main() {runApp(MyApp());
}
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}
class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {int? selected = 0; // 默認(rèn)選中混色List<String> lists = ['images/p1.jpg', 'images/p2.jpg', 'images/p3.jpg', 'images/p4.jpg'];int index = 0;double colorsValue = 0.0;BoxFit fitType = BoxFit.fill; // 用于控制圖片的填充方式@overrideWidget build(BuildContext context) {Container imgContainer;if (selected == 1) {// 如果是平鋪效果，將 Image.asset 放在 Container 中imgContainer = Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height / 3,color: Colors.amberAccent,child: Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage(lists[index]),repeat: ImageRepeat.repeat,),),),);} else if (selected == 2) {// 如果是拉伸原圖，將圖片的填充方式設(shè)置為拉伸imgContainer = Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height / 3,color: Colors.amberAccent,child: Image.asset(lists[index],fit: BoxFit.fill,),);} else {// 否則應(yīng)用混色效果imgContainer = Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height / 3,color: Colors.amberAccent,child: ColorFiltered(colorFilter: ColorFilter.mode(Color.fromARGB(255, colorsValue.round(), colorsValue.round(), colorsValue.round()),BlendMode.colorDodge,),child: Image.asset(lists[index],fit: fitType, // 使用BoxFit屬性來控制圖片的填充方式),),);}return Scaffold(body: Column(children: <Widget>[imgContainer,RadioListTile(value: 0,groupValue: selected,title: Text('混色'),subtitle: Slider(value: colorsValue,min: 0,max: 255,onChanged: (value) {setState(() {colorsValue = value;});},),onChanged: (value) {setState(() {selected = value ?? 0;fitType = BoxFit.fill; // 選擇混色時(shí)，將圖片的填充方式設(shè)置為拉伸});},),RadioListTile(value: 1,groupValue: selected,title: Text('平鋪'),subtitle: Text('按XY方向平鋪在顯示區(qū)域'),onChanged: (value) {setState(() {selected = value ?? 0;fitType = BoxFit.fill; // 選擇平鋪時(shí)，將圖片的填充方式設(shè)置為拉伸});},),RadioListTile(value: 2,groupValue: selected,title: Text('拉伸原圖'), // 選擇拉伸原圖時(shí)，將圖片的填充方式設(shè)置為拉伸onChanged: (value) {setState(() {selected = value ?? 0;fitType = BoxFit.fill;});},),RadioListTile(value: 3,groupValue: selected,title: Text('顯示原圖'), // 新增：顯示原圖onChanged: (value) {setState(() {selected = value ?? 0;fitType = BoxFit.contain; // 選擇顯示原圖時(shí)，將圖片的填充方式設(shè)置為保持寬高比適應(yīng)容器});},),Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[ElevatedButton(child: Text('向前'),onPressed: () {setState(() {if (index > 0) index--;});},),ElevatedButton(child: Text('向后'),onPressed: () {setState(() {if (index < lists.length - 1) index++;});},),],),],),);}
}