iOS轉向Flutter學習日記

1，flutter的安裝和建立

這個可以去掘金專欄或flutter中文網這裡不再贅述，附**：掘金：中文網：

2，關於開發語言，dart語言還是挺好學的，光看文件的語法大概也能知道怎麼用如能抽出時間去學dart進度更快。

3，最常見的widget 類似於viewcontroller和nsobject和uiview的結合體，它包含了已經做好的檢視樣式，包括帶導航欄的控制器scaffold，帶tabbar的控制器tabbar等。還有顯示文字的控制項叫text 顯示的image等等，它又包含了動畫繪製，手勢互動，滾動的listview，事件的處理等框架的整合，可以說涵蓋了oc裡的foundation很多功能和uikit的很多功能，所以說它是上述3個的結合體，凡建立檢視產生互動等等的處理的類都屬於widget，

4，建立類的時候分狀態可變和不可變型別，通常用簡寫即可建立，建立statefulclass的時候直接敲stf 建立stateless的時候直接敲stl回車即可，之後補寫類名

5，main.dart檔案是程式入口，相當於main.m，進入根檢視方法如下：

import 'package:flutter/material.dart';
import 'package:testdemo/homepage.dart';
@override
widget build(buildcontext context) 
}

當然之前已經建立好了homepage.dart檔案，是空的，下面來寫這個類

7，進入homepage，敲stf建立乙個class 名為homepage：

class homepage extends statefulwidget 
class _homepagestate extends state
}

建立好之後return後面需要你返回乙個元件，給這個頁面使用更新state，因為我們需要乙個導航欄，乙個view，所以我使用了scaffold和乙個listview

class homepage extends statefulwidget 
class _homepagestate extends state,
itemcount: 20,
),);
}}

8，具體的pageitem：

class pageitem extends statefulwidget 
class _pageitemstate extends state,
child: new padding(
padding: new edgeinsets.only(left: 0.0, top: 10.0, right: 10.0, bottom: 10.0),
child: new column(
mainaxissize: mainaxissize.min,
children: [
///文字描述
new container(
child: new text(
"這是一點描述",
style: textstyle(
color: colors.blue,
fontsize: 14.0,
),///最長三行，超過 ... 顯示
maxlines: 3,
overflow: textoverflow.ellipsis,
), margin: new edgeinsets.only(top: 6.0, bottom: 2.0),
alignment: alignment.topleft),
new padding(padding: edgeinsets.all(10.0)),
///三個平均分配的橫向圖示文字
new row(
children: [
new icon(
icons.star,
size: 16,
color: colors.grey,
),new image(
image: networkimage(""),
height: 70,
fit: boxfit.fitwidth,
filterquality: filterquality.high,
alignment: alignment.center,
),],
),],
),))),
);}}

上面的**就是向item內填充各個檢視的**，檢視就是乙個乙個的圖層堆上去的，這種的**雖然量大但是比較容易理解。

這樣你可以直接點ide的⚡️圖示直接執行了，效果如圖：

話說使用flutter最方便的就是省了重新編譯執行的時間，不用重新跑一遍**。對於ios來說省了十幾秒，對於安卓來說可是飛起來了。

9：各控制項的初始化，方法很多，屬性也不盡一致，只是自己寫例子時候一一用到並且為了加深印象而寫的，方法記錄如下（發現新的更方便的隨時更改）：

...未完待續

iOS轉向Flutter學習日記

Flutter學習初識 Flutter

iOS專案嵌入Flutter

iOS專案整合flutter

iOS轉向Flutter學習日記

Flutter學習 初識 Flutter

iOS專案嵌入Flutter

iOS專案整合flutter

相關推薦

Flutter學習初識 Flutter