1. 運行程序
建議使用 Android Studio 進行 flutter 編程 , Android Studio 對 dart 語法很友好。
2. 示范代碼
話不多說，先上代碼，代碼下載地址。如果對你有幫助的話記得給個關注，代碼會根據我的 Flutter 專題不斷更新。
3. 主頁創建
優雅的編程，我們讓 main.dart 更清晰，代碼邏輯后置。先創建一個 home.dart 文件。
import 'package:flutter/material.dart';
// 這里我們預留動態更新頁面功能，使用 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 進行更改，使用 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(),
);
}
}
運行程序后，如下圖，第一個主頁已經生成好了。
3. ListView 創建
ListView 可以說是應用非常廣泛的控件了，并且簡單實用，考慮到后續要在代碼下載地址持續更新，我們就首先介紹使用 ListView。
先簡單介紹一下代碼邏輯。
/*
此處代碼僅僅介紹這部分邏輯，不要復制使用，下邊會貼詳細代碼。
*/
class FMHomeVC extends StatefulWidget {
@override
// 創建 State
FMHomeState createState() => FMHomeState();
}
class FMHomeState extends State<FMHomeVC> {
// 創建數據源
var funcLists = [];
@override
// 重寫父類方法，頁面初始化會調用
void initState() {
super.initState();
// 封裝數據初始化方法，為數據源添加數據，未來也可以在這里做網絡請求
initData();
}
void initData() {
// 調用父類方法，會刷新頁面
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),
// 生成對應數據源數量的 Item
itemCount: funcLists.length,
itemBuilder: (context, index){
// 按照數據源對每個 Item 進行渲染
var func = funcLists[index];
return ListTile(
onTap: (){
// 點擊事件，在這里處理不同 Item 跳轉
},
);
},
),
),
),
);
}
下邊上詳細代碼
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": "基礎組件", "desc": "在構建您的第一個Flutter應用程序之前，您絕對需要了解這些widget。"});
funcLists.add({"name": "Material Components", "desc": "實現了Material Design 指南的視覺、效果、motion-rich的widget。"});
funcLists.add({"name": "Cupertino(iOS風格的widget)", "desc": "用于當前iOS設計語言的美麗和高保真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": "在您的應用中使用動畫。查看Flutter中的動畫總覽。"});
funcLists.add({"name": "交互模型", "desc": "響應觸摸事件并將用戶路由到不同的頁面視圖（View）。"});
funcLists.add({"name": "樣式", "desc": "管理應用的主題，使應用能夠響應式的適應屏幕尺寸或添加填充。"});
funcLists.add({"name": "繪制和效果", "desc": "Widget將視覺效果應用到其子組件，而不改變它們的布局、大小和位置。"});
funcLists.add({"name": "Async", "desc": "Flutter應用的異步模型。"});
funcLists.add({"name": "滾動", "desc": "滾動一個擁有多個子組件的父組件。"});
funcLists.add({"name": "輔助功能", "desc": "給你的App添加輔助功能(這是一個正在進行的工作)。"});
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();
}),
);
},
);
},
),
),
),
);
}
運行效果如下圖
點擊跳轉后如下圖
4. 技術小結
dart 文件的創建、引用以及使用
其實新的文件創建很重要，從接觸過的很多語言開發來看，項目入口還是盡可能要簡潔。
在 main.dart 中，我們 import package:PATH/home.dart ，并且在 MyApp 中將 FMHomeVC() 設置為 home。StateflulWidget 的使用與創建
這里不多贅述，網上很多講解，可以理解為頁面為動態的，便于刷新頁面。例如淘寶首頁，沒有網絡進去可能會沒有商品，但是網絡請求完成后，按照網絡數據需要刷新頁面，就需要使用到 StatefulWidget了。
StatefulWidget 主要功能都集中在 State 的創建和邏輯處理，然后在 State 類中執行 setState((){})方法，可以 reload 頁面，非常的簡單方便。ListView 的創建與使用
ListView 其實是一個非常常用的組件，大部分表單頁面和滾動視圖都是使用 ListView 完成的。
主要注意 ListView.builder() 方法中的 itemCount、itemBuilder 兩個key。itemCount 負責生成多少行 item ，itemBuilder 負責給對應行生成對應的 item。字典取值
本文中的 funcLists 為數組，數組中添加的每個元素都是字典。
然后 func = funcList[index] 取出每一個字典，然后 func["name"]、func["desc"] 取出對應 Key 的值，賦值給每個 item。"{var}" 為字符串中添加變量。
