[Day20]React Native GO TO Flutter

11th鐵人賽

DaYuan

團隊溫泉泡起來♨️

2019-10-06 19:10:41

1381 瀏覽

分享至

如題，這週我們將從React Native 改為以 Flutter 進行開發，要如何轉換呢？Widget? Component？View? Container?

兩者看是相似卻又截然不同的開發框架，究竟在這點短短幾天，我能上手嗎？

由於文章都是當天現做，有時會先發圖文再補上code，請見諒。

參考 Flutter for React Native 開發者

元件對照

React Native和Flutter小部件對等的組件

下面的表格控件了通用的React Native組件與對應的Flutter widget和通用的widget屬性。

React Native Component	Flutter widget	描述
Button	Raised Button	基本的懸浮按鈕
	onPressed [required]	該回調函數在當按鈕被點擊的時候被觸發。
	Child	按鈕的標籤

Button	Flat Button	基本的平面按鈕
	onPressed [required]	該回調函數在當按鈕被點擊的時候被觸發。
	Child	The button's label.

ScrollView	ListView	一個可滑動的縱向排列的 widget 列表。
	children	( <Widget> [ ]) 要顯示的子 widget 列表
	controller	[ Scroll Controller ] 可用於控制滑動 widget 的對象
	itemExtent	[ double ] 如果非空，那麼強制所有子 widget 在滑動方向上增加給定的距離
	scroll Direction	[ Axis ] 滑動頁面的滑動軸

FlatList	ListView. builder()	根據需要創建的一組 widget 的構造函數。
	itemBuilder [required]	[ Indexed Widget Builder] 根據需要創建子 widget。當元素序號大於等於零並且小於隊列元素總數時，該回調函數會被調用。
	itemCount	[ int ] 優化了 ListView 對於最大滑動範圍的預估能力。

Image	Image	顯示圖片的 widget。
	image [required]	要顯示的圖片
	Image. asset	有多個構造函數可以用於指定圖片。
	寬, 高, 顏色, alignment	圖片的風格和佈局。
	fit	將圖片內嵌到佈局對應的空間里。I

Modal	ModalRoute	避免和之前路徑交叉的路徑。
	animation	路徑切換的動畫和之前路徑向前切換的動畫。

Activity Indicator	Circular Progress Indicator	一個圓形的進度條 widget。
	strokeWidth	圓形線條的寬度。
	backgroundColor	指示進度的背景色。默認是當前主題的 `ThemeData.backgroundColor`。

Activity Indicator	Linear Progress Indicator	一個水平條形的進度條。
	value	進度值。

Refresh Control	Refresh Indicator	支持 Material 中滑動刷新的 widget
	color	進度指示的前景色。
	onRefresh	當用戶拖拽刷新指示器想要刷新的時候會調用該函數。

View	Container	封裝子 widget 的 widget。

View	Column	將子 widget 縱向排列的 widget。

View	Row	將子 widget 橫向排列的 widget。

View	Center	將子 widget 放置於中央的 widget。

View	Padding	將子 widget 按照給定的間隔進行排列的 widget。
	padding [required]	[ EdgeInsets ] 子 widget 間隔。
Text Input	Text Input	調用系統文本輸入的接口。
	controller	[ Text Editing Controller ] 用於獲取或者修改文本。

Text	Text	以單一的樣式顯示文本的文本 widget。
	data	[ String ] 要顯示的文本。
	textDirection	[ Text Align ]文本的方向。

Switch	Switch	Material Design 樣式的開關。
	value [required]	[ boolean ] 開關的開啓或者閉合狀態。
	onChanged [required]	[ callback ] 當用戶點擊開關的時候調用。

Slider	Slider	選擇一個範圍的值。
	value [required]	[ double ] 當前滑動器的值。