Flutter初學(xué) —— 常用控件使用

在編寫(xiě)幾個(gè) Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場(chǎng)景都有對(duì)應(yīng)的處理方案；而 Dart 語(yǔ)言也與 Java 、 Kotlin 類(lèi)似，所以對(duì) Android 開(kāi)發(fā)者來(lái)說(shuō)門(mén)檻非常低；特意記錄一下常用的控件及其使用：

創(chuàng)新互聯(lián)建站客戶(hù)idc服務(wù)中心，提供綿陽(yáng)電信機(jī)房機(jī)柜租用、成都服務(wù)器、成都主機(jī)托管、成都雙線(xiàn)服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過(guò)各地的服務(wù)中心，我們向成都用戶(hù)提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開(kāi)放、透明、穩(wěn)定、高性?xún)r(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。

StatelessWidget 不需要額外的創(chuàng)建 State

StatefulWidget 創(chuàng)建 State 類(lèi)，并可以在其中保存一些狀態(tài)

only 可以單獨(dú)設(shè)置每個(gè)方向的內(nèi)邊距

類(lèi)似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個(gè)對(duì)齊方式， crossAxisAlignment 表示橫向的對(duì)齊方式

與 Column 相反，主軸是橫向，對(duì)齊方式類(lèi)似， crossAxisAlignment 表示豎向的對(duì)齊方式

類(lèi)似 SizedBox ，一個(gè)容器，但是主要功能是有一個(gè) decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影

棧，先入后出，類(lèi)似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定顯示在某一個(gè)位置

配合多 child 使用，會(huì)填充剩余的空間

Image 功能強(qiáng)大，使用不同的方法可以加載不同來(lái)源的圖片

看到這些方法，突然覺(jué)得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無(wú)論是圓形還是五角星都不在話(huà)下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。

名字和 Android 的一模一樣，但是用法卻比 Android 的簡(jiǎn)單很多：

主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個(gè) widget ，當(dāng)然了，每個(gè) ListView 都有其對(duì)應(yīng)的 item ，在里面的方法中編寫(xiě) widget 即可

與 ListView 類(lèi)似，但是需要有一個(gè) delegate 類(lèi)，作用是設(shè)置有多少列，每一列之間的間距是多少

GridView 沒(méi)有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來(lái)處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

【Flutter】按鈕與文本（三）

此控件比較簡(jiǎn)單，按鈕的功能可劃分為UI樣式與事件回調(diào)

這里將幾種不同的按鈕一起運(yùn)行，做下對(duì)比動(dòng)圖如下：

這里對(duì)五種按鈕進(jìn)行column居中排列如下

Text用于顯示簡(jiǎn)單樣式文本，它包含一些控制文本顯示樣式的一些屬性。

TextStyle用于指定文本顯示的樣式如顏色、字體、粗細(xì)、背景等。

TextStyle更多屬性設(shè)置如下：

如果我們需要對(duì)一個(gè)Text內(nèi)容的不同部分按照不同的樣式顯示，即富文本，這時(shí)就可以使用TextSpan，它代表文本的一個(gè)“片段”。

如上述，我們當(dāng)然也可以在上述鏈接上添加手勢(shì)事件，后續(xù)會(huì)提到。

在widget樹(shù)中，文本的樣式默認(rèn)是可以被繼承的，因此，如果在widget樹(shù)的某一個(gè)節(jié)點(diǎn)處設(shè)置一個(gè)默認(rèn)的文本樣式，那么該節(jié)點(diǎn)的子樹(shù)中所有文本都會(huì)默認(rèn)使用這個(gè)樣式，而DefaultTextStyle正是用于設(shè)置默認(rèn)文本樣式的。

舉例如下：

flutter provider的理解

provider 是flutter 中的狀態(tài)管理 開(kāi)源庫(kù);

存儲(chǔ)的數(shù)據(jù)對(duì)象 必須extends ChangeNotifier；下層widget 通過(guò) Provider.of(context) 函數(shù) 獲取model對(duì)象 ,并且可以建立依賴(lài)關(guān)系；當(dāng)數(shù)據(jù)對(duì)象發(fā)生變化時(shí)，依賴(lài)的widget 會(huì)重新build，像不像InheritedWidget Provider 沒(méi)錯(cuò) 下層widget就是 封裝了InheritedWidget

主要 通過(guò) Provider.ofT(context) 函數(shù)，來(lái)獲??；

推薦使用 Provider.of而不是 Consumer,因?yàn)?listen默認(rèn)為true,也就是說(shuō) 默認(rèn) 依賴(lài)于 持有數(shù)據(jù)model的widget 對(duì)應(yīng)的element;

數(shù)據(jù)類(lèi) 可繼承的 ChangeNotifier,本身和privider框架 沒(méi)有關(guān)系；

ChangeNotifier 是 flutter框架 提供的工具類(lèi)， 用來(lái)實(shí)現(xiàn)一對(duì)多的訂閱通知功能。

離不開(kāi)DART的Flutter（dart篇）

hello world例子

在終端打印字符串‘Hello World!’

計(jì)算斐波那契數(shù)列

一個(gè)簡(jiǎn)單的類(lèi)

計(jì)算兩點(diǎn)距離

異步并發(fā)示例

使用了Isolate

1.面向?qū)ο?/p>

對(duì)于面向?qū)ο筮@個(gè)概念，相信了解Java的同學(xué)對(duì)這個(gè)概念一定不會(huì)陌生。

例如：我們有個(gè)Person Object他有很多特征和行為。

這些都是這個(gè)Person Object的屬性。

也就是因?yàn)橛辛诉@些特征，行為等等才決定了這個(gè)人是誰(shuí)。

那么回到Dart當(dāng)中，所有的都是對(duì)象，那么在就可以可以跟進(jìn)對(duì)象的屬性的特征，方法等等來(lái)進(jìn)行編程。

之所以我們?cè)谶@里又特別強(qiáng)調(diào)了一下面向?qū)ο蟮母拍睿且驗(yàn)檫@個(gè)概念在Dart語(yǔ)言當(dāng)中，至關(guān)重要！

2.最重要的幾個(gè)概念

3.Dart的部分特性

4.Dart的內(nèi)置庫(kù)

包名

描述

dart:asynv

異步編程，提供Future，Stream類(lèi)

dart：collection

集合

dart：convert

不同類(lèi)型的字符編碼解碼

dart：core

Dart語(yǔ)言核心功能，內(nèi)置類(lèi)型

dart:html

網(wǎng)頁(yè)開(kāi)發(fā)用到的庫(kù)

dart:io

文件讀寫(xiě)，IO相關(guān)

dart:math

數(shù)字常量以及函數(shù)，隨機(jī)算法等

dart:svg

事件和動(dòng)畫(huà)矢量圖支持

綜上述所說(shuō)要想學(xué)Flutter，先學(xué)Dart！關(guān)于Flutter下篇我會(huì)講到。為什么離不開(kāi)dart！

有關(guān)更多面經(jīng)、核心技術(shù)筆記；自己也是從事Android開(kāi)發(fā)5年有余了；整理了一些Android開(kāi)發(fā)技術(shù)核心筆記和面經(jīng)題綱， 如有需要的同學(xué)請(qǐng)私信我回復(fù)“核心筆記”或“面試”領(lǐng)取！

Flutter實(shí)戰(zhàn)：擼半個(gè)知乎日?qǐng)?bào)

感謝 知乎日?qǐng)?bào)-API-分析 提供的api幫助完成這個(gè)demo

該項(xiàng)目完全開(kāi)源，單純?yōu)榱藢W(xué)習(xí)與交流，希望大家喜歡，多多提意見(jiàn)。

后續(xù)會(huì)將未來(lái)學(xué)到的新知識(shí)點(diǎn)用到該項(xiàng)目，持續(xù)更新

1.今日熱點(diǎn)

2.主題分類(lèi)

3.文章詳情

4.抽屜列表增加緩存, 防止多次拉去數(shù)據(jù)

5.評(píng)論列表 (界面，動(dòng)畫(huà)優(yōu)化)

6.主題列表 (界面，動(dòng)畫(huà)優(yōu)化)

7.主頁(yè)banner自動(dòng)輪播,手指滑動(dòng)是禁止輪播，放開(kāi)則繼續(xù)

8.刷新數(shù)據(jù)失敗，增加重試按鈕

9.分享UI

9.登錄UI，聯(lián)動(dòng)交互（在評(píng)論界面可以點(diǎn)擊寫(xiě)點(diǎn)評(píng)進(jìn)入）

1.Flutter加載Html

1.注冊(cè)

2.登錄

3.發(fā)表評(píng)論

4.收藏

5.等等

flutter-動(dòng)畫(huà)

1.動(dòng)畫(huà)原理：在一段時(shí)間內(nèi)快速的多次改變UI外觀，由于人眼會(huì)產(chǎn)生視覺(jué)暫留所以最終看到的就是一個(gè)連續(xù)的動(dòng)畫(huà)。

UI的一次改變稱(chēng)為一個(gè)動(dòng)畫(huà)幀，對(duì)應(yīng)一次屏幕刷新。

FPS：幀率，每秒的動(dòng)畫(huà)幀數(shù)。

flutter動(dòng)畫(huà)分為兩類(lèi)：

常見(jiàn)動(dòng)畫(huà)模式：

是一個(gè)抽象類(lèi)，主要的功能是保存動(dòng)畫(huà)的值和狀態(tài)。常用的一個(gè)Animation類(lèi)是Animation double ,是一個(gè)在一段時(shí)間內(nèi)依次生成一個(gè)區(qū)間之間的值的類(lèi)，可以是線(xiàn)性或者曲線(xiàn)或者其他。

可以生成除double之外的其他類(lèi)型值，如：Animation Color 或 Animation Size 。

是一個(gè)動(dòng)畫(huà)控制器，控制動(dòng)畫(huà)的播放狀態(tài)，在屏幕刷新的每一幀，就會(huì)生成一個(gè)新的值。

包含動(dòng)畫(huà)的啟動(dòng)forward()、停止stop() 、反向播放 reverse()等方法，在給定的時(shí)間段內(nèi)線(xiàn)性的生成從0.0到1.0（默認(rèn)區(qū)間）的數(shù)字。

curve:描述動(dòng)畫(huà)的曲線(xiàn)過(guò)程。

curvedAnimation:指定動(dòng)畫(huà)的曲線(xiàn)。

常用Curve：

繼承自Animatable T ，表示的就是一個(gè) Animation 對(duì)象的取值范圍，只需要設(shè)置開(kāi)始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。

例如，Tween可能會(huì)生成從紅到藍(lán)之間的色值，或者從0到255。

Tween.animate:返回一個(gè)Animation。

映射過(guò)程：

1). Tween.animation通過(guò)傳入 aniamtionController 獲得一個(gè)_AnimatedEvaluation 類(lèi)型的 animation 對(duì)象(基類(lèi)為 Animation)， 并且將 aniamtionController 和 Tween 對(duì)象傳入了 _AnimatedEvaluation 對(duì)象。

2). animation.value方法即是調(diào)用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分別為 Tween 對(duì)象和 AnimationController 對(duì)象。

3). 這里的 animation 其實(shí)就是前面的 AnimationController 對(duì)象， transform 方法里面的 animation.value則就是 AnimationController 線(xiàn)性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個(gè) 0.0~1.0 的值被映射到了 begin 和 end 范圍內(nèi)了。

接收一個(gè)TickerProvider類(lèi)型的對(duì)象，它的主要職責(zé)是創(chuàng)建Ticker。

防止屏幕外動(dòng)畫(huà)消耗資源。

[圖片上傳失敗...(image-115b94-1636441483468)]

過(guò)程：

回調(diào)：

不使用addListener()和setState()來(lái)給widget添加動(dòng)畫(huà)。

使用AnimatedWidget，將widget分離出來(lái)，創(chuàng)建一個(gè)可重用動(dòng)畫(huà)的widget，AnimatedWidget中會(huì)自動(dòng)調(diào)用addListener()和setState()

AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

如何渲染過(guò)渡，把渲染過(guò)程也抽象出來(lái)：

AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。

MaterialPageRoute：平臺(tái)風(fēng)格一致的路由切換動(dòng)畫(huà)

CupertinoPageRoute：左右切換風(fēng)格

自定義：PageRouteBuilder

1.要?jiǎng)?chuàng)建交織動(dòng)畫(huà)，需要使用多個(gè)動(dòng)畫(huà)對(duì)象（Animation）。

2.一個(gè)AnimationController控制所有的動(dòng)畫(huà)對(duì)象。

3.給每一個(gè)動(dòng)畫(huà)對(duì)象指定時(shí)間間隔（Interval）

可以同時(shí)對(duì)其新、舊子元素添加顯示、隱藏動(dòng)畫(huà).

當(dāng)AnimatedSwitcher的child發(fā)生變化時(shí)（類(lèi)型或Key不同），舊child會(huì)執(zhí)行隱藏動(dòng)畫(huà)，新child會(huì)執(zhí)行執(zhí)行顯示動(dòng)畫(huà)。

希望大家支持一下，感謝

網(wǎng)頁(yè)標(biāo)題：關(guān)于flutter收藏功能的信息
分享路徑：http://jinyejixie.com/article14/dseccde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、搜索引擎優(yōu)化、網(wǎng)站策劃、企業(yè)網(wǎng)站制作、微信公眾號(hào)、用戶(hù)體驗(yàn)

廣告

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