1. 運(yùn)行程序
建議使用 Android Studio 進(jìn)行 flutter 編程 , Android Studio 對 dart 語法很友好莹菱。
2. 示范代碼
話不多說，先上代碼管削，代碼下載地址迎捺。如果對你有幫助的話記得給個(gè)關(guān)注流酬，代碼會根據(jù)我的 Flutter 專題不斷更新嗦董。
3. 主頁創(chuàng)建
優(yōu)雅的編程居兆，我們讓 main.dart 更清晰，代碼邏輯后置感混。先創(chuàng)建一個(gè) home.dart 文件端幼。
import 'package:flutter/material.dart';
// 這里我們預(yù)留動態(tài)更新頁面功能薯酝，使用 StatefulWidget
class FMHomeVC extends StatefulWidget {
@override
FMHomeState createState() => FMHomeState();
}
class FMHomeState extends State<FMHomeVC> {
return Container(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text("Home"),
),
body: Center(
child: Text("Home"),
),
),
);
}
然后對 main.dart 進(jìn)行更改函似，使用 home.dart 文件作為主頁，注意修改 import 路徑魏割。
import 'package:flutter/material.dart';
// 此處注意修改為自己的 home.dart 路徑
import 'package:FMStudyApp/home/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: FMHomeVC(),
);
}
}
運(yùn)行程序后庭呜，如下圖滑进，第一個(gè)主頁已經(jīng)生成好了。
3. ListView 創(chuàng)建
ListView 可以說是應(yīng)用非常廣泛的控件了募谎，并且簡單實(shí)用扶关，考慮到后續(xù)要在代碼下載地址持續(xù)更新，我們就首先介紹使用 ListView数冬。
先簡單介紹一下代碼邏輯节槐。
/*
此處代碼僅僅介紹這部分邏輯，不要復(fù)制使用拐纱，下邊會貼詳細(xì)代碼铜异。
*/
class FMHomeVC extends StatefulWidget {
@override
// 創(chuàng)建 State
FMHomeState createState() => FMHomeState();
}
class FMHomeState extends State<FMHomeVC> {
// 創(chuàng)建數(shù)據(jù)源
var funcLists = [];
@override
// 重寫父類方法，頁面初始化會調(diào)用
void initState() {
super.initState();
// 封裝數(shù)據(jù)初始化方法秸架，為數(shù)據(jù)源添加數(shù)據(jù)揍庄，未來也可以在這里做網(wǎng)絡(luò)請求
initData();
}
void initData() {
// 調(diào)用父類方法，會刷新頁面
setState(() {
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text("Widgets 目錄"),
),
body: Center(
child: ListView.builder(
padding: const EdgeInsets.all(15.0),
// 生成對應(yīng)數(shù)據(jù)源數(shù)量的 Item
itemCount: funcLists.length,
itemBuilder: (context, index){
// 按照數(shù)據(jù)源對每個(gè) Item 進(jìn)行渲染
var func = funcLists[index];
return ListTile(
onTap: (){
// 點(diǎn)擊事件东抹，在這里處理不同 Item 跳轉(zhuǎn)
},
);
},
),
),
),
);
}
下邊上詳細(xì)代碼
import 'package:flutter/material.dart';
class FMHomeVC extends StatefulWidget {
@override
FMHomeState createState() => FMHomeState();
}
class FMHomeState extends State<FMHomeVC> {
var funcLists = [];
@override
void initState() {
super.initState();
initData();
}
void initData() {
funcLists.add({"name": "基礎(chǔ)組件", "desc": "在構(gòu)建您的第一個(gè)Flutter應(yīng)用程序之前蚂子，您絕對需要了解這些widget。"});
funcLists.add({"name": "Material Components", "desc": "實(shí)現(xiàn)了Material Design 指南的視覺府阀、效果缆镣、motion-rich的widget。"});
funcLists.add({"name": "Cupertino(iOS風(fēng)格的widget)", "desc": "用于當(dāng)前iOS設(shè)計(jì)語言的美麗和高保真widget试浙。"});
funcLists.add({"name": "Layout", "desc": "排列其它widget的columns董瞻、rows、grids和其它的layouts。"});
funcLists.add({"name": "Text", "desc": "文本顯示和樣式钠糊。"});
funcLists.add({"name": "Assets挟秤、圖片、Icons", "desc": "管理assets, 顯示圖片和Icon抄伍。"});
funcLists.add({"name": "Input", "desc": "Material Components 和 Cupertino中獲取用戶輸入的widget艘刚。"});
funcLists.add({"name": "動畫和Motion", "desc": "在您的應(yīng)用中使用動畫。查看Flutter中的動畫總覽截珍。"});
funcLists.add({"name": "交互模型", "desc": "響應(yīng)觸摸事件并將用戶路由到不同的頁面視圖（View）攀甚。"});
funcLists.add({"name": "樣式", "desc": "管理應(yīng)用的主題，使應(yīng)用能夠響應(yīng)式的適應(yīng)屏幕尺寸或添加填充岗喉。"});
funcLists.add({"name": "繪制和效果", "desc": "Widget將視覺效果應(yīng)用到其子組件秋度，而不改變它們的布局、大小和位置钱床。"});
funcLists.add({"name": "Async", "desc": "Flutter應(yīng)用的異步模型荚斯。"});
funcLists.add({"name": "滾動", "desc": "滾動一個(gè)擁有多個(gè)子組件的父組件。"});
funcLists.add({"name": "輔助功能", "desc": "給你的App添加輔助功能(這是一個(gè)正在進(jìn)行的工作)查牌。"});
print(funcLists);
setState(() {
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text("Widgets 目錄"),
),
body: Center(
child: ListView.builder(
padding: const EdgeInsets.all(15.0),
itemCount: funcLists.length,
itemBuilder: (context, index){
var func = funcLists[index];
return ListTile(
contentPadding: const EdgeInsets.all(10.0),
title: Text(
"${func["name"]}",
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
subtitle: Text(
"${func["desc"]}",
style: TextStyle(
fontSize: 15,
color: Colors.grey,
),
),
onTap: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return FMHomeVC();
}),
);
},
);
},
),
),
),
);
}
運(yùn)行效果如下圖
點(diǎn)擊跳轉(zhuǎn)后如下圖
4. 技術(shù)小結(jié)
dart 文件的創(chuàng)建事期、引用以及使用
其實(shí)新的文件創(chuàng)建很重要，從接觸過的很多語言開發(fā)來看纸颜，項(xiàng)目入口還是盡可能要簡潔兽泣。
在 main.dart 中，我們 import package:PATH/home.dart 胁孙，并且在 MyApp 中將 FMHomeVC() 設(shè)置為 home撞叨。StateflulWidget 的使用與創(chuàng)建
這里不多贅述，網(wǎng)上很多講解浊洞，可以理解為頁面為動態(tài)的，便于刷新頁面胡岔。例如淘寶首頁法希，沒有網(wǎng)絡(luò)進(jìn)去可能會沒有商品，但是網(wǎng)絡(luò)請求完成后靶瘸，按照網(wǎng)絡(luò)數(shù)據(jù)需要刷新頁面苫亦，就需要使用到 StatefulWidget了。
StatefulWidget 主要功能都集中在 State 的創(chuàng)建和邏輯處理怨咪，然后在 State 類中執(zhí)行 setState((){})方法屋剑，可以 reload 頁面，非常的簡單方便诗眨。ListView 的創(chuàng)建與使用
ListView 其實(shí)是一個(gè)非常常用的組件唉匾，大部分表單頁面和滾動視圖都是使用 ListView 完成的。
主要注意 ListView.builder() 方法中的 itemCount、itemBuilder 兩個(gè)key巍膘。itemCount 負(fù)責(zé)生成多少行 item 厂财，itemBuilder 負(fù)責(zé)給對應(yīng)行生成對應(yīng)的 item。字典取值
本文中的 funcLists 為數(shù)組峡懈，數(shù)組中添加的每個(gè)元素都是字典璃饱。
然后 func = funcList[index] 取出每一個(gè)字典，然后 func["name"]肪康、func["desc"] 取出對應(yīng) Key 的值荚恶，賦值給每個(gè) item。"{var}" 為字符串中添加變量磷支。
