因為筆者本身主要從事是Android開發，所以很多角度都是作為一個Android開發者學習Flutter的角度出發，IOS或者H5的開發同學可以選擇性閱讀
目錄
StatefulWidget基礎組件展示
MaterialApp
MaterialApp 是我們app開發中常用的符合MaterialApp Design設計理念的入口Widget。MaterialApp這個組件里面的參數比較多，而且一般在應用入口會用到，所以這里把它內部的所有參數都列出來了
MaterialApp({
Key key,
this.title = '', // 設備用于為用戶識別應用程序的單行描述
this.home, // 應用程序默認路由的小部件,用來定義當前應用打開的時候，所顯示的界面
this.color, // 在操作系統界面中應用程序使用的主色。
this.theme, // 應用程序小部件使用的顏色。
this.routes = const <String, WidgetBuilder>{}, // 應用程序的頂級路由表
this.navigatorKey, // 在構建導航器時使用的鍵。
this.initialRoute, // 如果構建了導航器，則顯示的第一個路由的名稱
this.onGenerateRoute, // 應用程序導航到指定路由時使用的路由生成器回調
this.onUnknownRoute, // 當 onGenerateRoute 無法生成路由(initialRoute除外)時調用
this.navigatorObservers = const <NavigatorObserver>[], // 為該應用程序創建的導航器的觀察者列表
this.builder, // 用于在導航器上面插入小部件，但在由WidgetsApp小部件創建的其他小部件下面插入小部件，或用于完全替換導航器
this.onGenerateTitle, // 如果非空，則調用此回調函數來生成應用程序的標題字符串，否則使用標題。
this.locale, // 此應用程序本地化小部件的初始區域設置基于此值。
this.localizationsDelegates, // 這個應用程序本地化小部件的委托。
this.localeListResolutionCallback, // 這個回調負責在應用程序啟動時以及用戶更改設備的區域設置時選擇應用程序的區域設置。
this.localeResolutionCallback, //
this.supportedLocales = const <Locale>[Locale('en', 'US')], // 此應用程序已本地化的地區列表
this.debugShowMaterialGrid = false, // 打開繪制基線網格材質應用程序的網格紙覆蓋
this.showPerformanceOverlay = false, // 打開性能疊加
this.checkerboardRasterCacheImages = false, // 打開柵格緩存圖像的棋盤格
this.checkerboardOffscreenLayers = false, // 打開渲染到屏幕外位圖的圖層的棋盤格
this.showSemanticsDebugger = false, // 打開顯示框架報告的可訪問性信息的覆蓋
this.debugShowCheckedModeBanner = true, // 在選中模式下打開一個小的“DEBUG”橫幅，表示應用程序處于選中模式
})
基本用法：
可以看到我們在App的最外層直接使用了MaterialApp，可以指定App的名稱（title），App的主題樣式（theme），首頁的組件（home），路由跳轉配置）（routes），關于路由跳轉我們在后面的章節中會介紹
void main() => runApp(App());
// This widget is the root of your application.
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: NavigatorPage(),
routes: <String, WidgetBuilder>{
'less': (BuildContext context) => StatelessWidgetPage(),
'ful': (BuildContext context) => StatefulWidgetPage(),
'layout': (BuildContext context) => LayoutPage()
},
);
}
}
Scaffold
Scaffold 實現了基本的 Material Design 布局結構，Scaffold在英文中的解釋為角手架，我們可以理解為樓體中的鋼架結構，通過它可以構建一個頁面
在Flutter應用開發中，我們可以將 Scaffold 理解為一個布局的容器。可以在這個容器中繪制我們的用戶界面
下面是MaterialApp + Scaffold的組合的基本用法
MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(...),//頂部導航欄
bottomNavigationBar: BottomNavigationBar(...),//底部菜單欄
body: Container(...),//主體
floatingActionButton: FloatingActionButton(...),//懸浮按鈕
),
)
AppBar
AppBar就是頂部的導航欄組件，支持自定義標題，左右兩側的工具欄按鈕等
AppBar(
//標題
title: Text("AppBar"),
//左側按鈕（一般用于設置back鍵）
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back),
),
//右側按鈕集合
actions: <Widget>[
IconButton(
icon: new Icon(Icons.add_alarm),
tooltip: 'Add Alarm',
onPressed: () {})
],
)
BottomNavigationBar
BottomNavigationBar是底部的菜單欄組件
使用方法：
一般我們會定義一個全局變量如_currentIndex用于記錄當前選中的下標。然后在onTap屬性的回調方法中調用
setState(() { _currentIndex = index;});更新_currentIndex就可以實現底部菜單的切換。BottomNavigationBar一般會配合BottomNavigationBarItem一起使用（如下所示）
int _currentIndex = 0;
BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home, color: Colors.grey),
activeIcon: Icon(
Icons.home,
color: Colors.blue,
),
title: Text("首頁"),
),
BottomNavigationBarItem(
icon: Icon(Icons.list, color: Colors.grey),
activeIcon: Icon(
Icons.list,
color: Colors.blue,
),
title: Text("列表"),
)
],
)
RefreshIndicator
RefreshIndicator是Flutter中的下拉刷新組件，一般配合ListView組件一起使用
RefreshIndicator(
child: ListView(
children: <Widget>[
],
),
onRefresh: _handleRefresh,
)
Image
Image就類似于android中的ImageView，可以自定義圖片顯示的寬高
從網絡中加載圖片
Image.network(
"https://upload-images.jianshu.io/upload_images/10992781-a64bd14d27699266.png?imageMogr2/auto-orient/strip|imageView2/2/w/800/format/webp",
width: 200,
height: 200,
)
從本地（File文件）加載圖片
Image.file(new File('/storage/xxx/xxx/test.jpg'))
從本地資源加載圖片
Image.asset('images/logo.png')
可以將byte數組加載成圖片
Image.memory(bytes)
TextField
TextField就類似于android的EditText
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),
hintText: "請輸入",
hintStyle: TextStyle(fontSize: 15)),
)
PageView
PageView就類似于android中的ViewPager
PageView(
children: <Widget>[
_item('Page1', Colors.lightBlue),
_item('Page2', Colors.lightGreen),
_item('Page3', Colors.red)
],
)
//創建PageView的item
_item(String title, Color color) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(color: color),
child: Text(
title,
style: TextStyle(fontSize: 22, color: Colors.white),
),
);
}
