flutter中流式布局

流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變。柵欄系統(tǒng)（網(wǎng)格系統(tǒng)），用戶標(biāo)簽等。在Flutter中主要有Wrap和Flow兩種Widget實現(xiàn)。

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗的網(wǎng)站設(shè)計師、開發(fā)人員和項目經(jīng)理組成的專業(yè)建站團隊，負責(zé)網(wǎng)站視覺設(shè)計、用戶體驗優(yōu)化、交互設(shè)計和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)易于使用并且具有良好的響應(yīng)性。

在介紹Row和Colum時，如果子widget超出屏幕范圍，則會報溢出錯誤，在Flutter中通過Wrap和Flow來支持流式布局，溢出部分則會自動折行。

上述有很多屬性和Row的相同，其意義其實也是相同的，這里我就不一一介紹了，主要介紹下不同的屬性：

我們一般很少會使用Flow，因為其過于復(fù)雜，需要自己實現(xiàn)子widget的位置轉(zhuǎn)換，在很多場景下首先要考慮的是Wrap是否滿足需求。Flow主要用于一些需要自定義布局策略或性能要求較高(如動畫中)的場景。Flow有如下優(yōu)點：

我們對六個色塊進行自定義流式布局：

實現(xiàn)TestFlowDelegate:

可以看到我們主要的任務(wù)就是實現(xiàn)paintChildren，它的主要任務(wù)是確定每個子widget位置。由于Flow不能自適應(yīng)子widget的大小，我們通過在getSize返回一個固定大小來指定Flow的大小，實現(xiàn)起來還是比較麻煩的。

Flutter 之 動畫1

對動畫系統(tǒng)而言，為了實現(xiàn)動畫，它需要做三件事兒：1.確定畫面變化的規(guī)律；2.根據(jù)這個規(guī)律，設(shè)定動畫周期，啟動動畫；3.定期獲取當(dāng)前動畫的值，不斷地微調(diào)、重繪畫面。

這三件事情對應(yīng)到 Flutter 中，就是 Animation、AnimationController 與 Listener：

1.Animation 是 Flutter 動畫庫中的核心類，會根據(jù)預(yù)定規(guī)則，在單位時間內(nèi)持續(xù)輸出動畫的當(dāng)前狀態(tài)。Animation 知道當(dāng)前動畫的狀態(tài)（比如，動畫是否開始、停止、前進或者后退，以及動畫的當(dāng)前值），但卻不知道這些狀態(tài)究竟應(yīng)用在哪個組件對象上。換句話說，Animation 僅僅是用來提供動畫數(shù)據(jù)，而不負責(zé)動畫的渲染。

2.AnimationController 用于管理 Animation，可以用來設(shè)置動畫的時長、啟動動畫、暫停動畫、反轉(zhuǎn)動畫等。

3.Listener 是 Animation 的回調(diào)函數(shù)，用來監(jiān)聽動畫的進度變化，我們需要在這個回調(diào)函數(shù)中，根據(jù)動畫的當(dāng)前值重新渲染組件，實現(xiàn)動畫的渲染。

class NormalAnimateWidget extends StatefulWidget {

@override

StatecreateState()=_NormalAnimateState();

}

class _NormalAnimateState extends Statewith SingleTickerProviderStateMixin{

AnimationController?controller;

Animation?animation;

@override

void initState() {

// TODO: implement initState

super.initState();

/*

* AnimationController

AnimationController用于控制動畫，它包含動畫的啟動forward()、停止stop() 、反向播放 reverse()等方法。

* AnimationController會在動畫的每一幀，就會生成一個新的值。

* 默認情況下，AnimationController在給定的時間段內(nèi)線性的生成從 0.0 到1.0（默認區(qū)間）的數(shù)字。

* */

/*Ticker

當(dāng)創(chuàng)建一個AnimationController時，需要傳遞一個vsync參數(shù)，

它接收一個TickerProvider類型的對象，它的主要職責(zé)是創(chuàng)建Ticker，定義如下：

abstract class TickerProvider {

//通過一個回調(diào)創(chuàng)建一個Ticker

Ticker createTicker(TickerCallback onTick);

}

Flutter 應(yīng)用在啟動時都會綁定一個SchedulerBinding，

通過SchedulerBinding可以給每一次屏幕刷新添加回調(diào)，

而Ticker就是通過SchedulerBinding來添加屏幕刷新回調(diào)，這樣一來，

每次屏幕刷新都會調(diào)用TickerCallback。

使用Ticker(而不是Timer)來驅(qū)動動畫會防止屏幕外動畫（動畫的UI不在當(dāng)前屏幕時，如鎖屏?xí)r）

消耗不必要的資源，因為Flutter中屏幕刷新時會通知到綁定的SchedulerBinding，

而Ticker是受SchedulerBinding驅(qū)動的，

由于鎖屏后屏幕會停止刷新，所以Ticker就不會再觸發(fā)。

*/

// 創(chuàng)建動畫周期為1秒的AnimationController對象

controller =AnimationController(

vsync:this, duration:const Duration(milliseconds:3000));

/*

* Curve

* 動畫過程可以是勻速的、勻加速的或者先加速后減速等。

* Flutter中通過Curve（曲線）來描述動畫過程，

* 我們把勻速動畫稱為線性的(Curves.linear)，而非勻速動畫稱為非線性的。

* 我們可以通過CurvedAnimation來指定動畫的曲線，如：

final CurvedAnimation curve =

CurvedAnimation(parent: controller, curve: Curves.easeIn);

*

Curves曲線 動畫過程

linear 勻速的

decelerate 勻減速

ease 開始加速，后面減速

easeIn 開始慢，后面快

easeOut? 開始快，后面慢

easeInOut? 開始慢，然后加速，最后再減速

*

* 當(dāng)然我們也可以創(chuàng)建自己Curve，例如我們定義一個正弦曲線：

class ShakeCurve extends Curve {

@override

double transform(double t) {

return math.sin(t * math.PI * 2);

}

}

* */

final CurvedAnimation curve =CurvedAnimation(

parent:controller!, curve:Curves.linear);

/*

* Animation

*Animation是一個抽象類，它本身和UI渲染沒有任何關(guān)系，

* 而它主要的功能是保存動畫的插值和狀態(tài)；其中一個比較常用的Animation類是Animation。

* Animation對象是一個在一段時間內(nèi)依次生成一個區(qū)間(Tween)之間值的類。

* Animation對象在整個動畫執(zhí)行過程中輸出的值可以是線性的、曲線的、一個步進函數(shù)或者任何其他曲線函數(shù)等等，

* 這由Curve來決定。 根據(jù)Animation對象的控制方式，

* 動畫可以正向運行（從起始狀態(tài)開始，到終止?fàn)顟B(tài)結(jié)束），

* 也可以反向運行，甚至可以在中間切換方向。

* Animation還可以生成除double之外的其他類型值

* ，如：Animation 或Animation。

* 在動畫的每一幀中，我們可以通過Animation對象的value屬性獲取動畫的當(dāng)前狀態(tài)值。

#動畫通知

我們可以通過Animation來監(jiān)聽動畫每一幀以及執(zhí)行狀態(tài)的變化，Animation有如下兩個方法：

addListener()；它可以用于給Animation添加幀監(jiān)聽器，

* 在每一幀都會被調(diào)用。

* 幀監(jiān)聽器中最常見的行為是改變狀態(tài)后調(diào)用setState()來觸發(fā)UI重建。

addStatusListener()；

* 它可以給Animation添加“動畫狀態(tài)改變”監(jiān)聽器；

* 動畫開始、結(jié)束、正向或反向（見AnimationStatus定義）時會調(diào)用狀態(tài)改變的監(jiān)聽器。

* */

// 創(chuàng)建從50到200線性變化的Animation對象

// 普通動畫需要手動監(jiān)聽動畫狀態(tài)，刷新UI

animation =Tween(begin:10.0, end:200.0).animate(curve)

..addListener(()=setState((){}));

/*

* Tween

* 默認情況下，AnimationController對象值的范圍是[0.0，1.0]。

* 如果我們需要構(gòu)建UI的動畫值在不同的范圍或不同的數(shù)據(jù)類型，

* 則可以使用Tween來添加映射以生成不同的范圍或數(shù)據(jù)類型的值。

*Tween構(gòu)造函數(shù)需要begin和end兩個參數(shù)。

* Tween的唯一職責(zé)就是定義從輸入范圍到輸出范圍的映射。

* 輸入范圍通常為[0.0，1.0]，但這不是必須的，我們可以自定義需要的范圍。

* */

// 啟動動畫

controller!.repeat(reverse:true);

//

// 第二段

// animation!.addStatusListener((status) {

//? if (status == AnimationStatus.completed) {

//? ? controller!.reverse();// 動畫結(jié)束時反向執(zhí)行

//? } else if (status == AnimationStatus.dismissed) {

//? ? controller!.forward();// 動畫反向執(zhí)行完畢時，重新執(zhí)行

//? }

// });

// controller!.forward();// 啟動動畫

}

@override

Widget build(BuildContext context) {

return MaterialApp(

home:Scaffold(

body:Center(

child:Container(

width:animation!.value,// 將動畫的值賦給 widget 的寬高

? ? ? ? ? ? ? height:animation!.value,//

? ? ? ? ? ? ? child:FlutterLogo(),

)

)

)

);

}

@override

void dispose() {

// 釋放資源

controller!.dispose();

super.dispose();

}

}

Flutter視頻播放器，簡潔！

注：亮度調(diào)節(jié)和音量調(diào)節(jié)gif無法體現(xiàn)，功能是ok的，其次默認Icon鎖的close和open實在難以分辨。

環(huán)境：Flutter 2.8.1 channel stable ;Dart 2.15.1

需要音頻播放器的看這里： Flutter音樂播放器

重點說下這個工具類，因為視頻播放，涉及到狀態(tài)改變有很多，筆者剛開始選擇使用 InheritedWidget 來在眾多的widget之間共享數(shù)據(jù)。但是總感覺這樣有點繁瑣，且不很優(yōu)雅！

這里非廣告，如果是使用 GetX 就很簡單了，筆者也使用了 GetX 進行封裝了，一瀉千里的趕腳！，但是筆者還是那句話：剛開始接觸Flutter的開發(fā)者不是很建議使用 GetX ，可以先熟悉下Flutter狀態(tài)管理的基礎(chǔ)原理再行使用。而且為了盡量簡潔，還是不引入其他的第三方了。

我們選擇對第三方插件進行封裝的目的不外乎這幾個：

于是筆者就寫了一個工具類 VideoPlayerUtils ，專門且只用來處理播放器的所有業(yè)務(wù)。包括暫停、播放、跳轉(zhuǎn)、調(diào)節(jié)音量、調(diào)節(jié)亮度、切換視頻等操作。在所有的widget中不會引用關(guān)于 video_player 或其他第三方插件的任何信息， VideoPlayerUtils 負責(zé)widget與播放器之間的所有操作交互。后續(xù)優(yōu)化迭代或更換播放器插件時，只需針對這個工具類進行修改，對所有widget不會有任何的影響，大大的解耦合了。

其中 VideoPlayerState ：

提供以上的公共屬性，可以通過 VideoPlayerUtils 來獲取對應(yīng)的值，使用 get 只讀，使外界不會誤修改這些屬性，以保證數(shù)值的安全性。開發(fā)者可根據(jù)自身需要自行添加屬性。

提供以上方法來處理播放器的所有業(yè)務(wù)。同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。

重點說下這個方法，是整個業(yè)務(wù)的核心方法，控制視頻的播放或暫停。開發(fā)者只要遇到播放或暫停是均可調(diào)用此方法，具體是播放或暫停，內(nèi)部根據(jù)傳入的 url 自行判斷，開發(fā)者不需要關(guān)心。

切換新視頻也是使用此方法，傳入的 url 與上次不一致，自動切換新視頻。筆者可根據(jù) statusListener 來監(jiān)聽播放狀態(tài)的改變，以此處理自身邏輯。

這個也需要提下，視頻播放器在播放新視頻時會異步初始化，一般我們的操作是在 initState() 初始化，成功后再 setState() 。這里筆者遇到一個讓人蛋疼的問題：

我們看 video_player 的使用：

VideoPlayer(controller) ：widget中已經(jīng)持有了controller。本來筆者封裝的目的就是為了讓widget與controller的之間解耦合。但此時的筆者。。。。

放棄不是不可能放棄的，這輩子都不會放棄的！

于是筆者取了巧，寫了一個初始化監(jiān)聽器 initializedListener ，包換2個參數(shù)： bool,Widget ，初始化是否成功；其中widget為初始化成功返回需要展示的播放器UI，失敗默認返回 const SizedBox() 。

到這里就可以簡單使用了：

沒看錯，視頻播放就是這么簡單。

如果有更多的業(yè)務(wù)功能，筆者也按照自己的需求寫了一套，同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。

VideoPlayerGestures 主要是處理手勢的，比如快進、快退等跳轉(zhuǎn)播放；左側(cè)上下滑動調(diào)節(jié)亮度；右側(cè)上下滑動調(diào)節(jié)音量；單擊是否開啟沉浸式播放，所有widget的隱藏與顯示；雙擊播放、暫停等。

哦，還有 PercentageWidget 也放到這個文件下了，就是這玩意：

因為顯示的百分比與手勢相關(guān)，隨著手勢移動而更新。開發(fā)者可自行處理。

筆者處出于簡單考慮，就按照整個UI的位置命名了。瞅一眼就知道是啥玩意。

同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。

就是這玩意：

同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。話說這個鎖的 Icon 的open和close是真的難分辨！

就是這玩意：

同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。

這玩意是自定義的，別問，問就是跟產(chǎn)品干一架落了下風(fēng)

主要就是自定義這玩意：

同樣的開發(fā)者可根據(jù)自身需要自定義。

注：這里沒有添加緩沖的進度，開發(fā)可查看 video_player 中的源碼 VideoProgressIndicator ，按業(yè)務(wù)自行定義。

這玩意就是整合以上的widget，再考慮下全屏的安全區(qū)域，沒啥東西。開發(fā)者可自行處理！

具體的實現(xiàn)監(jiān)聽器的思路， 看這里 。

自此一個漂亮的Flutter視頻播放器就已經(jīng)結(jié)束了。如果您覺得對您有些許幫助的話，歡迎 Star ！

標(biāo)題名稱：flutter流暫停,貼吧flutter崩潰
網(wǎng)頁地址：http://chinadenli.net/article25/dsesgci.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、品牌網(wǎng)站設(shè)計、網(wǎng)站改版、外貿(mào)建站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)