當你開始進行 Flutter App開發時，設計清晰的應用藍圖至關重要。無論是專案結構的規劃，還是模組化的代碼設計，都能幫助你打造高效、易維護的應用程式。本文將從專案結構、Dart 命名約定、模組化思維等方面進行解析，並通過範例深入講解 StatelessWidget 和 StatefulWidget 的實際應用。
1️⃣ Flutter 專案結構
Flutter 預設的專案結構簡單直觀，了解其組織方式和最佳實踐，能幫助你更高效地管理代碼。
（1）資料夾結構
Flutter 專案的主要資料夾和文件包括：- lib/：核心代碼存放處，是應用程式的主文件夾。
- main.dart：應用的入口文件。
- 其他子目錄建議：
- screens/：存放各個頁面（Screen）。widgets/：存放可重複使用的 Widget。
- models/：存放業務邏輯中用到的數據模型。services/：存放與後端交互的功能（例如 API 調用）。
- android/ 和 ios/：分別存放 Android 和 iOS 的原生代碼，適合用來配置權限或整合第三方插件。
- pubspec.yaml：配置文件，用於管理應用資源和第三方依賴，例如引入圖標、字體、套件等。
💡 提示：保持資料夾結構清晰，便於日後維護和擴展。
（2）Dart 專案結構與命名約定
- 文件命名：使用小寫且用下劃線分隔，例如 my_widget.dart。
- 類名命名：遵循駝峰命名法（PascalCase），如 MyHomePage。
- 變量和方法命名：使用小駝峰命名法（camelCase），如 onButtonPressed。
- 常量命名：使用全大寫和下劃線分隔，例如 MAX_COUNT。
💡 良好的命名習慣能提升代碼的可讀性，特別是在多人協作時。
（3）預設 Template 解析
新建專案後，Flutter 提供了一個預設範例模板。以下是模板中關鍵部分的解析：
1. 導入 Library
import 'package:flutter/material.dart';
- flutter/material.dart 是預設的 Material Design 樣式庫，提供了豐富的 UI 元素和布局工具。
2. 應用入口
void main() {
runApp(const MyApp());
}
- main() 方法是 Dart 的程序入口。
- runApp() 方法加載根組件，並啟動應用程式。
3. MyApp 應用結構
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
- MaterialApp：Flutter 應用的入口組件，負責應用的全局設置（如主題、路由）。
- home：指定應用的首頁組件。
4. MyHomePage
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
- StatefulWidget：用於有狀態的組件（如需要更新界面的組件）。
- title：通過構造函數接收參數，靈活定義頁面屬性。
5. State
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('You have pushed the button this many times:'),
Text('$_counter', style: Theme.of(context).textTheme.headline4),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
- 狀態管理：通過 setState() 觸發界面刷新，更新 _counter 的值並重繪組件。
- Scaffold：提供 Material Design 的頁面結構，包括 AppBar、Body 和 FloatingActionButton。
2️⃣ Flutter 模組化與重用
模組化設計能讓應用程式更易於維護和擴展。以下是模組化設計的核心思維與實踐。
（1）模組化思維
- 功能分離：將應用分為多個模組，每個模組負責單一功能（例如用戶驗證、數據展示）。
- 代碼重用：將可重複使用的組件（如按鈕、卡片）封裝成獨立的 Widget。
（2）Widget 的層次結構與組合模式
Flutter 的 UI 是由 Widget 層層組合而成。合理的層次結構能提升代碼的可讀性和可維護性：
Widget 層次結構圖
----------------
Container
└── ColoredBox
└── Column / Row
├── Image
├── Text
├── RawImage
└── RichText
解釋層次結構：
- Container：
- Flutter 中最常用的 Widget，用於包裹其他 Widget。
- 可以設置邊距、對齊方式、背景顏色等。
- 它通常作為頂層容器。
- ColoredBox：
- 用於設置背景色，比 Container 更輕量，但無法設置其他屬性（如邊框或邊距）。
- 適合純粹需要設置背景顏色的情況。
- Row / Column：
- 用於排列子 Widget，Row 是水平排列，Column 是垂直排列。
- 它們是組織多個子 Widget 的核心布局工具。
- Image：
- 用於顯示圖片，支持多種圖片來源（如網絡圖片、本地圖片）。
- Text：
- 用於顯示簡單文字，支持樣式（如字體大小、顏色等）設置。
- RawImage：
- 一個底層的圖片 Widget，直接渲染圖片數據，適合處理自定義圖片數據的場景。
- RichText：
- 用於顯示富文本（多樣式的文字），支持字體、顏色和樣式的混合設置。
輸出效果：
- Container：作為背景容器，設置灰色背景和內邊距。
- ColoredBox：設置白色背景，包裹內容。
- Row：水平排列 Image、Text 和 RichText。
- Image：展示 Flutter 官方 LOGO。
- Text：顯示簡單文字。
- RichText：顯示富文本，支持多樣式文字。
這樣的層次結構非常適合處理複雜的界面布局，並且每層 Widget 都有清晰的職責，便於維護和擴展。
（3）範例解析：StatelessWidget 和 StatefulWidget
StatelessWidget
- 特點：無內部狀態，適合靜態界面。
範例：
class MyTitle extends StatelessWidget {
final String title;
MyTitle({required this.title});
@override
Widget build(BuildContext context) {
return Text(
Title,
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
);
}
}
- 用途：顯示靜態標題文字。
StatefulWidget
- 特點：有內部狀態，適合需要更新界面的組件。
範例：
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Counter: $_counter", style: TextStyle(fontSize: 20)),
ElevatedButton(
onPressed: _incrementCounter,
child: Text("Increment"),
),
],
);
}
}
- 用途：動態計數器，可根據按鈕點擊更新界面。
如何選擇？
結語：清晰的設計是成功的基石
學習 Flutter 專案結構、掌握模組化設計和充分理解 StatelessWidget 與 StatefulWidget，能幫助你打造高效的應用程式。透過合理的組件劃分與代碼重用，你的應用將更加靈活、易於維護。
立即應用這些技巧，為你的 Flutter 項目畫下完美的開發藍圖吧！ 🚀
