flutter進(jìn)度,flutter 更新

Flutter開發(fā) -- [12 - 監(jiān)聽滾動(dòng)事件]

ListView、GridView的組件控制器是ScrollController，我們可以通過(guò)它來(lái)獲取視圖的滾動(dòng)信息，并且可以調(diào)用里面的方法來(lái)更新視圖的滾動(dòng)位置。

成都創(chuàng)新互聯(lián)主營(yíng)鄲城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),鄲城h5小程序定制開發(fā)搭建,鄲城網(wǎng)站營(yíng)銷推廣歡迎鄲城等地區(qū)企業(yè)咨詢

另外，通常情況下，我們會(huì)根據(jù)滾動(dòng)的位置來(lái)改變一些Widget的狀態(tài)信息，所以ScrollController通常會(huì)和StatefulWidget一起來(lái)使用，并且會(huì)在其中控制它的初始化、監(jiān)聽、銷毀等事件。

我們來(lái)做一個(gè)案例，當(dāng)滾動(dòng)到1000位置的時(shí)候，顯示一個(gè)回到頂部的按鈕：

如果我們希望監(jiān)聽什么時(shí)候開始滾動(dòng)，什么時(shí)候結(jié)束滾動(dòng)，這個(gè)時(shí)候我們可以通過(guò) NotificationListener 。

案例: 列表滾動(dòng), 并且在中間顯示滾動(dòng)進(jìn)度

Flutter踩坑之旅

記錄下自己踩過(guò)的坑,怕忘了

一.TextField:

1.去掉輸入數(shù)字的計(jì)數(shù):decoration中的counterStyle: TextStyle(color: Colors.transparent).

2.去掉獲取和失去焦點(diǎn)時(shí)邊框改變顏色的效果:decoration內(nèi)border: InputBorder.none,

3.去邊框時(shí)設(shè)置BorderSide的width為0或color: Colors.transparent后依然存在邊框時(shí),需要設(shè)置為borderSide: BorderSide.none

4.設(shè)置背景色需要在decoration內(nèi) ? ? filled:true, ? fillColor: Colors.blue同時(shí)設(shè)置才會(huì)顯示

二.Uint8List類型和string類型,Listint的轉(zhuǎn)換

連續(xù)兩次base64解碼時(shí),參數(shù)只能使用string類型,但是base64解碼后是Uint8List類型,此時(shí)需要將Uint8List類型轉(zhuǎn)換為string類型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';

Listint轉(zhuǎn)Uint8List:讀取接口時(shí)獲取的數(shù)據(jù)是Listint的圖片數(shù)據(jù),想顯示時(shí)需要轉(zhuǎn)成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可

三.報(bào)錯(cuò):DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...

這是因?yàn)閐io請(qǐng)求返回的數(shù)據(jù)默認(rèn)是以json的格式讀取的,而返回的數(shù)據(jù)是密文形式,需要修改dio的Options的responseType為ResponseType.PLAIN,這樣返回的數(shù)據(jù)就以字符串形式處理.

四.去掉點(diǎn)擊控件背景出現(xiàn)的水波紋效果,即去掉md的效果:

在main.dart的MaterialApp內(nèi)的theme加上splashColor: Colors.transparent

五.布局去掉沉浸式效果和布局設(shè)置占滿全屏卻無(wú)效的問(wèn)題

使用Scaffold的body的布局默認(rèn)是沉浸式的,將狀態(tài)欄一起包含了,可以通過(guò)在body后添加一層SafeArea即可.

布局設(shè)置double.infinity占滿全屏高度卻無(wú)效,大部分情況都是因?yàn)槟骋患?jí)的父布局的高度已經(jīng)有了限制,所以設(shè)置充滿屏幕只會(huì)充滿父布局,有些widget默認(rèn)是按內(nèi)容填充類似wrap_content就會(huì)導(dǎo)致寫布局的過(guò)程中自己沒(méi)有限制高度但最后的布局不是自己想要的,可以給各個(gè)父布局設(shè)置不同背景顏色來(lái)查看是從哪兒開始被限制了高度來(lái)排查問(wèn)題.

六.占滿剩余空間,類似android的match_parent可以使用double.infinity

七.LinearProgressIndicator

1.LinearProgressIndicator設(shè)置進(jìn)度值的顏色為單一顏色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))

2.給LinearProgressIndicator設(shè)置圓角:ClipRRect(

borderRadius:BorderRadius.circular(60.0),

child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),

)

八.Expanded:

1.若嵌套多層column且內(nèi)容的高度都不確定需要占滿剩余空間,需要每層的column的內(nèi)容都嵌套一層expanded來(lái)申明每層都占滿剩余的空間,否則最里面的內(nèi)容層需要指定高度,不然會(huì)報(bào)錯(cuò)

九.Container設(shè)置最小/大寬度或高度:

constraints:BoxConstraints(minHeight:56),

十.滑動(dòng)的widget嵌套:

1.解決滑動(dòng)沖突:內(nèi)層嵌套的滑動(dòng)widget設(shè)置physics:NeverScrollableScrollPhysics()

2.解決滑動(dòng)嵌套u(yù)i顯示不出來(lái)或者報(bào)錯(cuò),內(nèi)層的滑動(dòng)widget設(shè)置shrinkWrap:true

十一.使用multi_image_picker: ^4.3.4安卓運(yùn)行報(bào)錯(cuò)Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"

1.需要android工程支持androidx,需要在android工程的gradle.properties內(nèi)添加android.enableJetifier=true和android.useAndroidX=true并點(diǎn)擊右上角的open for editing in android studio,運(yùn)行成功后就可以了

十二.使用textfield時(shí)的文字ui總是很高

使用了maxlength且只是在textfield的InputDecoration設(shè)置counterStyle的顏色為透明使下面的計(jì)數(shù)文字消失會(huì)導(dǎo)致文字ui很高,counter的計(jì)數(shù)文字只是顏色是透明但依然在布局中占了位置所以導(dǎo)致文字很高,直接使用counterText:""即可

十三.使用ListView報(bào)錯(cuò)Vertical viewport was given unbounded height

需要將ListView放入Expanded內(nèi)部

Flutter 之 動(dòng)畫1

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

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

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

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

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

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用于控制動(dòng)畫，它包含動(dòng)畫的啟動(dòng)forward()、停止stop() 、反向播放 reverse()等方法。

* AnimationController會(huì)在動(dòng)畫的每一幀，就會(huì)生成一個(gè)新的值。

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

* */

/*Ticker

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

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

abstract class TickerProvider {

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

Ticker createTicker(TickerCallback onTick);

}

Flutter 應(yīng)用在啟動(dòng)時(shí)都會(huì)綁定一個(gè)SchedulerBinding，

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

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

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

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

消耗不必要的資源，因?yàn)镕lutter中屏幕刷新時(shí)會(huì)通知到綁定的SchedulerBinding，

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

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

*/

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

controller =AnimationController(

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

/*

* Curve

* 動(dòng)畫過(guò)程可以是勻速的、勻加速的或者先加速后減速等。

* Flutter中通過(guò)Curve（曲線）來(lái)描述動(dòng)畫過(guò)程，

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

* 我們可以通過(guò)CurvedAnimation來(lái)指定動(dòng)畫的曲線，如：

final CurvedAnimation curve =

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

*

Curves曲線 動(dòng)畫過(guò)程

linear 勻速的

decelerate 勻減速

ease 開始加速，后面減速

easeIn 開始慢，后面快

easeOut? 開始快，后面慢

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

*

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

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是一個(gè)抽象類，它本身和UI渲染沒(méi)有任何關(guān)系，

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

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

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

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

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

* 也可以反向運(yùn)行，甚至可以在中間切換方向。

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

* ，如：Animation 或Animation。

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

#動(dòng)畫通知

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

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

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

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

addStatusListener()；

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

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

* */

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

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

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

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

/*

* Tween

* 默認(rèn)情況下，AnimationController對(duì)象值的范圍是[0.0，1.0]。

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

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

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

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

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

* */

// 啟動(dòng)動(dòng)畫

controller!.repeat(reverse:true);

//

// 第二段

// animation!.addStatusListener((status) {

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

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

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

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

//? }

// });

// controller!.forward();// 啟動(dòng)動(dòng)畫

}

@override

Widget build(BuildContext context) {

return MaterialApp(

home:Scaffold(

body:Center(

child:Container(

width:animation!.value,// 將動(dòng)畫的值賦給 widget 的寬高

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

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

)

)

)

);

}

@override

void dispose() {

// 釋放資源

controller!.dispose();

super.dispose();

}

}

網(wǎng)站題目：flutter進(jìn)度,flutter 更新
本文路徑：http://m.jiaotiyi.com/article/dsidppc.html