1. 自定義組件
在flutter中自定義組件就是自定義一個類,這個類需要繼承StatelessWidget/StatefulWidget。在flutter里面萬物皆組件。把某個功能或者某個模塊都可以抽離成一個組件。
- StatelessWidget 是無狀態(tài)組件 狀態(tài)不可變的widget 是個抽象類 需要實現(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個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是一個封裝好易于使用的Widget,它封裝了應(yīng)有程序?qū)崿F(xiàn)Material Design所需要的一些Widget或者說是app開發(fā)中常用的符合Material Design設(shè)計理念的入口Widget。一般作為頂層(根組件)Widget使用。
- MaterialApp的構(gòu)造方法中的參數(shù)都是可以省略的,但是官方文檔也寫出了至少要有
home
,routes
,onGenerateRoute
或者builder
中的一個。如果只寫了routes
,則必須包含Navigator.defaultRouteName()
。
-
MaterialApp所有屬性
- title :在任務(wù)管理窗口中所顯示的應(yīng)用名字 設(shè)備用于為用戶識別應(yīng)用程序的單行描述
- home 應(yīng)用默認所顯示的界面 Widget
- theme :應(yīng)用各種 UI 所使用的主題顏色 應(yīng)用程序小部件使用的顏色。
- color : 應(yīng)用的主要顏色值(primary color),也就是安卓任務(wù)管理窗口中所顯示的應(yīng)用顏色 在操作系統(tǒng)界面中應(yīng)用程序使用的主色。
- routes : 應(yīng)用的頂級導(dǎo)航表格,這個是多頁面應(yīng)用用來控制頁面跳轉(zhuǎn)的,類似于網(wǎng)頁的網(wǎng)址 應(yīng)用程序的頂級路由表
- initialRoute :第一個顯示的路由名字,默認值為 Window.defaultRouteName 如果構(gòu)建了導(dǎo)航器,則顯示的第一個路由的名稱
- onGenerateRoute : 生成路由的回調(diào)函數(shù),當導(dǎo)航的命名路由的時候,會使用這個來生成界面 應(yīng)用程序?qū)Ш降街付酚蓵r使用的路由生成器回調(diào)
- onLocaleChanged : 當系統(tǒng)修改語言的時候,會觸發(fā)?這個回調(diào)
- onUnknownRoute :當 onGenerateRoute 無法生成路由(initialRoute除外)時調(diào)用
- navigatorObservers : 應(yīng)用 Navigator 的監(jiān)聽器
- debugShowMaterialGrid : 是否顯示 紙墨設(shè)計 基礎(chǔ)布局網(wǎng)格,用來調(diào)試 UI 的工具
- showPerformanceOverlay : 顯示性能標簽,https://flutter.io/debugging/#performanceoverlay
- checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各種調(diào)試開關(guān)
- navigatorKey: 在構(gòu)建導(dǎo)航器時使用的鍵。
- 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)用程序的標題字符串,否則使用標題。
- locale : 此應(yīng)用程序本地化小部件的初始區(qū)域設(shè)置基于此值。
- localizationsDelegates : 這個應(yīng)用程序本地化小部件的委托。
- localeListResolutionCallback :這個回調(diào)負責(zé)在應(yīng)用程序啟動時以及用戶更改設(shè)備的區(qū)域設(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 : 打開顯示框架報告的可訪問性信息的覆蓋
- debugShowCheckedModeBanner = true : 在選中模式下打開一個小的“DEBUG”橫幅,表示應(yīng)用程序處于選中模式
-
MaterialApp常用屬性詳細說明
- title:這個和啟動圖標名字是不一樣的,和當前 Activity 的名字也是不一樣的。 這個 Title 是用來定義任務(wù)管理窗口界面所看到應(yīng)用名字的。在原生 Android 系統(tǒng)中點擊圓圈
- theme:定義應(yīng)用所使用的主題顏色,在紙墨設(shè)計中定義了 primaryColor、accentColor、hintColor 等顏色值??梢酝ㄟ^這個來指定一個 ThemeData 定義應(yīng)用中每個控件的顏色。
- color : 定義系統(tǒng)中該應(yīng)用的主要顏色
- home :這個是一個 Widget 對象,用來定義當前應(yīng)用打開的時候,所顯示的界面。
- routes: 定義應(yīng)用中頁面跳轉(zhuǎn)規(guī)則。 該對象是一個 Map<String, WidgetBuilder>。當使用 Navigator.pushNamed 來路由的時候,會在 routes 查找路由名字,然后使用 對應(yīng)的 WidgetBuilder 來構(gòu)造一個帶有頁面切換動畫的 MaterialPageRoute。如果應(yīng)用只有一個界面,則不用設(shè)置這個屬性,使用 home 設(shè)置這個界面即可。如果 home 不為 null,當 routes 中包含 Navigator.defaultRouteName('/') 的時候會出錯,兩個都是 home 沖突了。如果所查找的路由在 routes 中不存在,則會通過 onGenerateRoute 來查找。指定默認顯示的路由名字,默認值為 Window.defaultRouteName
2. Scaffold
Scaffold是Material Design布局結(jié)構(gòu)的基本實現(xiàn)。此類提供了用于顯示drawer snackbar和底部sheet的API。
- Scaffold主要屬性
- appBar - 顯示在界面頂部的一個AppBar
- body - 當前界面所顯示的主要內(nèi)容widget
- drawer - 抽屜菜單控件
void main(){
runApp(MyApp());
}
// 自定義組件
// StatelessWidget 是無狀態(tài)組件 狀態(tài)不可變的widget 是個抽象類 需要實現(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個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的標題
title: Text(
'Flutter Demo',
//設(shè)置文本樣式
style: TextStyle(
//設(shè)置文本顏色
color: Colors.red
)
),
//設(shè)置appbar上的圖標顏色
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')),
]
),
)
);
}
}
效果圖