1. 自定義組件
在flutter中自定義組件就是自定義一個(gè)類茄蚯，這個(gè)類需要繼承StatelessWidget/StatefulWidget压彭。在flutter里面萬物皆組件睦优。把某個(gè)功能或者某個(gè)模塊都可以抽離成一個(gè)組件。
- StatelessWidget 是無狀態(tài)組件 狀態(tài)不可變的widget 是個(gè)抽象類 需要實(shí)現(xiàn)里面的build方法
- StatefulWidget 是有狀態(tài)組件壮不，持有的狀態(tài)可能在widget生命周期變化
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
List<Widget> _getData(){//生成20條數(shù)據(jù)
List<Widget> list = List();
for (var i = 0; i < 20; i++) {
list.add(
ListTile(
title: Text('我是第$i個(gè)cell'),
));
}
return list;
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListView'),
),
body:ListView(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(10),
children: this._getData(),//顯示數(shù)據(jù)
),
),
theme: ThemeData(
primaryColor: Colors.yellow,
),
);
}
}
2. MaterialApp和Scaffold組件修飾App
-
MaterialApp
- MaterialApp是一個(gè)封裝好易于使用的Widget汗盘，它封裝了應(yīng)有程序?qū)崿F(xiàn)Material Design所需要的一些Widget或者說是app開發(fā)中常用的符合Material Design設(shè)計(jì)理念的入口Widget。一般作為頂層(根組件)Widget使用询一。
- MaterialApp的構(gòu)造方法中的參數(shù)都是可以省略的隐孽，但是官方文檔也寫出了至少要有
home,routes,onGenerateRoute或者builder中的一個(gè)。如果只寫了routes健蕊，則必須包含Navigator.defaultRouteName()。
-
MaterialApp所有屬性
- title ：在任務(wù)管理窗口中所顯示的應(yīng)用名字 設(shè)備用于為用戶識別應(yīng)用程序的單行描述
- home 應(yīng)用默認(rèn)所顯示的界面 Widget
- theme ：應(yīng)用各種 UI 所使用的主題顏色 應(yīng)用程序小部件使用的顏色抗俄。
- color ： 應(yīng)用的主要顏色值（primary color），也就是安卓任務(wù)管理窗口中所顯示的應(yīng)用顏色 在操作系統(tǒng)界面中應(yīng)用程序使用的主色胰蝠。
- routes ： 應(yīng)用的頂級導(dǎo)航表格，這個(gè)是多頁面應(yīng)用用來控制頁面跳轉(zhuǎn)的，類似于網(wǎng)頁的網(wǎng)址 應(yīng)用程序的頂級路由表
- initialRoute ：第一個(gè)顯示的路由名字效扫，默認(rèn)值為 Window.defaultRouteName 如果構(gòu)建了導(dǎo)航器，則顯示的第一個(gè)路由的名稱
- onGenerateRoute ： 生成路由的回調(diào)函數(shù)，當(dāng)導(dǎo)航的命名路由的時(shí)候闪盔，會使用這個(gè)來生成界面 應(yīng)用程序?qū)Ш降街付酚蓵r(shí)使用的路由生成器回調(diào)
- onLocaleChanged ： 當(dāng)系統(tǒng)修改語言的時(shí)候，會觸發(fā)?這個(gè)回調(diào)
- onUnknownRoute ：當(dāng) onGenerateRoute 無法生成路由(initialRoute除外)時(shí)調(diào)用
- navigatorObservers ： 應(yīng)用 Navigator 的監(jiān)聽器
- debugShowMaterialGrid ： 是否顯示 紙墨設(shè)計(jì) 基礎(chǔ)布局網(wǎng)格，用來調(diào)試 UI 的工具
- showPerformanceOverlay ： 顯示性能標(biāo)簽塔拳，https://flutter.io/debugging/#performanceoverlay
- checkerboardRasterCacheImages 适掰、showSemanticsDebugger载城、debugShowCheckedModeBanner 各種調(diào)試開關(guān)
- navigatorKey： 在構(gòu)建導(dǎo)航器時(shí)使用的鍵力细。
- navigatorObservers = const <NavigatorObserver>[]： 為該應(yīng)用程序創(chuàng)建的導(dǎo)航器的觀察者列表
- builder ： 用于在導(dǎo)航器上面插入小部件煞聪，但在由WidgetsApp小部件創(chuàng)建的其他小部件下面插入小部件，或用于完全替換導(dǎo)航器
- onGenerateTitle ： 如果非空，則調(diào)用此回調(diào)函數(shù)來生成應(yīng)用程序的標(biāo)題字符串碱鳞，否則使用標(biāo)題贵白。
- locale ： 此應(yīng)用程序本地化小部件的初始區(qū)域設(shè)置基于此值。
- localizationsDelegates ： 這個(gè)應(yīng)用程序本地化小部件的委托。
- localeListResolutionCallback ：這個(gè)回調(diào)負(fù)責(zé)在應(yīng)用程序啟動(dòng)時(shí)以及用戶更改設(shè)備的區(qū)域設(shè)置時(shí)選擇應(yīng)用程序的區(qū)域設(shè)置热康。
- supportedLocales = const <Locale>[Locale('en', 'US')] ： 此應(yīng)用程序已本地化的地區(qū)列表
- localeResolutionCallback
- debugShowMaterialGrid = false ：打開繪制基線網(wǎng)格材質(zhì)應(yīng)用程序的網(wǎng)格紙覆蓋
- showPerformanceOverlay = false ： 打開性能疊加
- checkerboardRasterCacheImages = false ： 打開柵格緩存圖像的棋盤格
- checkerboardOffscreenLayers = false ： 打開渲染到屏幕外位圖的圖層的棋盤格
- showSemanticsDebugger = false ： 打開顯示框架報(bào)告的可訪問性信息的覆蓋
- debugShowCheckedModeBanner = true ： 在選中模式下打開一個(gè)小的“DEBUG”橫幅奕锌，表示應(yīng)用程序處于選中模式
-
MaterialApp常用屬性詳細(xì)說明
- title：這個(gè)和啟動(dòng)圖標(biāo)名字是不一樣的，和當(dāng)前 Activity 的名字也是不一樣的缴守。 這個(gè) Title 是用來定義任務(wù)管理窗口界面所看到應(yīng)用名字的忽肛。在原生 Android 系統(tǒng)中點(diǎn)擊圓圈
- theme：定義應(yīng)用所使用的主題顏色础废，在紙墨設(shè)計(jì)中定義了 primaryColor淑掌、accentColor媒殉、hintColor 等顏色值。可以通過這個(gè)來指定一個(gè) ThemeData 定義應(yīng)用中每個(gè)控件的顏色颂跨。
- color ： 定義系統(tǒng)中該應(yīng)用的主要顏色
- home ：這個(gè)是一個(gè) Widget 對象，用來定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面琢歇。
- routes： 定義應(yīng)用中頁面跳轉(zhuǎn)規(guī)則肥橙。 該對象是一個(gè) Map<String, WidgetBuilder>。當(dāng)使用 Navigator.pushNamed 來路由的時(shí)候，會在 routes 查找路由名字，然后使用 對應(yīng)的 WidgetBuilder 來構(gòu)造一個(gè)帶有頁面切換動(dòng)畫的 MaterialPageRoute略吨。如果應(yīng)用只有一個(gè)界面秽之，則不用設(shè)置這個(gè)屬性河质，使用 home 設(shè)置這個(gè)界面即可媒楼。如果 home 不為 null，當(dāng) routes 中包含 Navigator.defaultRouteName（'/'） 的時(shí)候會出錯(cuò)，兩個(gè)都是 home 沖突了。如果所查找的路由在 routes 中不存在，則會通過 onGenerateRoute 來查找。指定默認(rèn)顯示的路由名字春贸，默認(rèn)值為 Window.defaultRouteName
2. Scaffold
Scaffold是Material Design布局結(jié)構(gòu)的基本實(shí)現(xiàn)。此類提供了用于顯示drawer snackbar和底部sheet的API。
- Scaffold主要屬性
- appBar - 顯示在界面頂部的一個(gè)AppBar
- body - 當(dāng)前界面所顯示的主要內(nèi)容widget
- drawer - 抽屜菜單控件
void main(){
runApp(MyApp());
}
// 自定義組件
// StatelessWidget 是無狀態(tài)組件 狀態(tài)不可變的widget 是個(gè)抽象類 需要實(shí)現(xiàn)里面的build方法
// StatefulWidget 是有狀態(tài)組件榆俺，持有的狀態(tài)可能在widget生命周期變化
class MyApp extends StatelessWidget{
List<Widget> _getData(){
List<Widget> list = List();
for (var i = 0; i < 20; i++) {
list.add(
ListTile(
title: Text('我是第$i個(gè)cell'),
));
}
return list;
}
final iconUrl = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2334534157,4285826929&fm=26&gp=0.jpg';
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
theme: ThemeData(//在這可以設(shè)置主題樣式
//設(shè)置主題顏色
primaryColor: Colors.yellow,
),
home: Scaffold(
//設(shè)置App頂部的AppBar
appBar: AppBar(
//AppBar的標(biāo)題
title: Text(
'Flutter Demo',
//設(shè)置文本樣式
style: TextStyle(
//設(shè)置文本顏色
color: Colors.red
)
),
//設(shè)置appbar上的圖標(biāo)顏色
iconTheme: IconThemeData(color: Colors.white)
),
//頁面顯示的元素
body: //HBGridView(),
ListView(
// scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(10),
children: this._getData(),
),
//頁面底部導(dǎo)航欄
bottomNavigationBar : CupertinoTabBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Image.network(iconUrl),
title: Text('data')),
BottomNavigationBarItem(
icon: Image.network(iconUrl),
title: Text('data')),
BottomNavigationBarItem(
icon: Image.network(iconUrl),
title: Text('data')),
]
),
)
);
}
}
效果圖
