因為筆者本身主要從事是Android開發(fā)压汪，所以很多角度都是作為一個Android開發(fā)者學(xué)習(xí)Flutter的角度出發(fā)，IOS或者H5的開發(fā)同學(xué)可以選擇性閱讀
目錄
StatefulWidget基礎(chǔ)組件展示
MaterialApp
MaterialApp 是我們app開發(fā)中常用的符合MaterialApp Design設(shè)計理念的入口Widget澡屡。MaterialApp這個組件里面的參數(shù)比較多，而且一般在應(yīng)用入口會用到，所以這里把它內(nèi)部的所有參數(shù)都列出來了
MaterialApp({
Key key,
this.title = '', // 設(shè)備用于為用戶識別應(yīng)用程序的單行描述
this.home, // 應(yīng)用程序默認路由的小部件,用來定義當前應(yīng)用打開的時候杆烁，所顯示的界面
this.color, // 在操作系統(tǒng)界面中應(yīng)用程序使用的主色陪竿。
this.theme, // 應(yīng)用程序小部件使用的顏色禽翼。
this.routes = const <String, WidgetBuilder>{}, // 應(yīng)用程序的頂級路由表
this.navigatorKey, // 在構(gòu)建導(dǎo)航器時使用的鍵。
this.initialRoute, // 如果構(gòu)建了導(dǎo)航器族跛，則顯示的第一個路由的名稱
this.onGenerateRoute, // 應(yīng)用程序?qū)Ш降街付酚蓵r使用的路由生成器回調(diào)
this.onUnknownRoute, // 當 onGenerateRoute 無法生成路由(initialRoute除外)時調(diào)用
this.navigatorObservers = const <NavigatorObserver>[], // 為該應(yīng)用程序創(chuàng)建的導(dǎo)航器的觀察者列表
this.builder, // 用于在導(dǎo)航器上面插入小部件闰挡，但在由WidgetsApp小部件創(chuàng)建的其他小部件下面插入小部件，或用于完全替換導(dǎo)航器
this.onGenerateTitle, // 如果非空礁哄，則調(diào)用此回調(diào)函數(shù)來生成應(yīng)用程序的標題字符串长酗，否則使用標題。
this.locale, // 此應(yīng)用程序本地化小部件的初始區(qū)域設(shè)置基于此值桐绒。
this.localizationsDelegates, // 這個應(yīng)用程序本地化小部件的委托夺脾。
this.localeListResolutionCallback, // 這個回調(diào)負責(zé)在應(yīng)用程序啟動時以及用戶更改設(shè)備的區(qū)域設(shè)置時選擇應(yīng)用程序的區(qū)域設(shè)置。
this.localeResolutionCallback, //
this.supportedLocales = const <Locale>[Locale('en', 'US')], // 此應(yīng)用程序已本地化的地區(qū)列表
this.debugShowMaterialGrid = false, // 打開繪制基線網(wǎng)格材質(zhì)應(yīng)用程序的網(wǎng)格紙覆蓋
this.showPerformanceOverlay = false, // 打開性能疊加
this.checkerboardRasterCacheImages = false, // 打開柵格緩存圖像的棋盤格
this.checkerboardOffscreenLayers = false, // 打開渲染到屏幕外位圖的圖層的棋盤格
this.showSemanticsDebugger = false, // 打開顯示框架報告的可訪問性信息的覆蓋
this.debugShowCheckedModeBanner = true, // 在選中模式下打開一個小的“DEBUG”橫幅茉继，表示應(yīng)用程序處于選中模式
})
基本用法：
可以看到我們在App的最外層直接使用了MaterialApp劳翰，可以指定App的名稱（title），App的主題樣式（theme）馒疹，首頁的組件（home）佳簸，路由跳轉(zhuǎn)配置）（routes），關(guān)于路由跳轉(zhuǎn)我們在后面的章節(jié)中會介紹
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 實現(xiàn)了基本的 Material Design 布局結(jié)構(gòu)，Scaffold在英文中的解釋為角手架生均，我們可以理解為樓體中的鋼架結(jié)構(gòu)听想，通過它可以構(gòu)建一個頁面
在Flutter應(yīng)用開發(fā)中，我們可以將 Scaffold 理解為一個布局的容器马胧『郝颍可以在這個容器中繪制我們的用戶界面
下面是MaterialApp + Scaffold的組合的基本用法
MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(...),//頂部導(dǎo)航欄
bottomNavigationBar: BottomNavigationBar(...),//底部菜單欄
body: Container(...),//主體
floatingActionButton: FloatingActionButton(...),//懸浮按鈕
),
)
AppBar
AppBar就是頂部的導(dǎo)航欄組件，支持自定義標題佩脊，左右兩側(cè)的工具欄按鈕等
AppBar(
//標題
title: Text("AppBar"),
//左側(cè)按鈕（一般用于設(shè)置back鍵）
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back),
),
//右側(cè)按鈕集合
actions: <Widget>[
IconButton(
icon: new Icon(Icons.add_alarm),
tooltip: 'Add Alarm',
onPressed: () {})
],
)
BottomNavigationBar
BottomNavigationBar是底部的菜單欄組件
使用方法：
一般我們會定義一個全局變量如_currentIndex用于記錄當前選中的下標蛙粘。然后在onTap屬性的回調(diào)方法中調(diào)用
setState(() { _currentIndex = index;});更新_currentIndex就可以實現(xiàn)底部菜單的切換。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出牧，可以自定義圖片顯示的寬高
從網(wǎng)絡(luò)中加載圖片
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數(shù)組加載成圖片
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)
],
)
//創(chuàng)建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),
),
);
}
