前言
-
Flutter 作為Google出品的一個新興的跨平臺移動客戶端UI開發(fā)框架，正在被越來越多的開發(fā)者和組織使用要拂，包括阿里的咸魚抠璃、騰訊的微信等。
示意圖 今天脱惰，我主要講解Flutter中完整頁面方面的Widget搏嗡，包括
Material App、Scaffold拉一、AppBar彻况，希望你們會喜歡。
示意圖
1. Material App
- 定義：使用Material Design設(shè)計風(fēng)格的應(yīng)用的頂層主界面入口舅踪，包含主題顏色纽甘、標(biāo)題、主顏色等抽碌。
- 作用：包含了Material Design設(shè)計風(fēng)格的應(yīng)用所需要的基本控件
- 常用屬性：
示意圖
此處詳細(xì)列出主題（Theme）的設(shè)置
示意圖
- 代碼演示
import 'package:flutter/material.dart'; // Material UI組件庫
void main() => runApp(MyApp());
// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title:'Widget_Demo',//標(biāo)題
theme:ThemeData(primarySwatch: Colors.blue),//主題色
home:MyHomePage(),// 返回一個Widget對象悍赢，用來定義當(dāng)前應(yīng)用打開的時候，所顯示的界面
);
}
}
// 返回的Widget對象
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
//設(shè)置appbar
appBar:new AppBar(
title:new Text('Flutter Demo'),
),
//主體
body:new Center(
//在屏幕中央顯示一個文本
child:new Text('carsonho demo'),
),
);
}
}
- 效果
示意圖
2. Scaffold
實現(xiàn)了基本的 Material Dsign布局货徙，含AppBar左权、Body主題內(nèi)容等。
- 設(shè)置屬性
Scaffold({
Key key,
this.appBar,// 設(shè)置應(yīng)用欄痴颊，顯示在腳手架頂部
this.body,// 設(shè)置腳手架內(nèi)容區(qū)域控件
this.floatingActionButton,//設(shè)置顯示在上層區(qū)域的按鈕赏迟，默認(rèn)位置位于右下角
this.floatingActionButtonLocation,// 設(shè)置floatingActionButton的位置
this.floatingActionButtonAnimator,// floatingActionButtonAnimator 動畫
this.persistentFooterButtons,// 一組顯示在腳手架底部的按鈕(在bottomNavigationBar底部導(dǎo)航欄的上面)
this.drawer,// 設(shè)置左邊側(cè)邊欄
this.endDrawer,// 設(shè)置右邊側(cè)邊欄
this.bottomNavigationBar,// 設(shè)置底部導(dǎo)航欄
this.bottomSheet,// 底部抽屜欄
this.backgroundColor,// 設(shè)置腳手架內(nèi)容區(qū)域的顏色
this.resizeToAvoidBottomPadding = true,// 控制界面內(nèi)容 body 是否重新布局來避免底部被覆蓋，比如當(dāng)鍵盤顯示的時候蠢棱，重新布局避免被鍵盤蓋住內(nèi)容锌杀。
})
- 具體使用
void main() => runApp(MyApp());
//用無狀態(tài)控件顯示
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title:'Widget_Demo',//標(biāo)題
theme:ThemeData(primarySwatch: Colors.blue),//主題色
home:MyHomePage(),// 返回一個Widget對象，用來定義當(dāng)前應(yīng)用打開的時候泻仙，所顯示的界面
);
}
}
// 返回的Widget對象
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
//設(shè)置appbar
appBar:new AppBar(
title:new Text('Flutter Demo'),
),
//主體
body:new Center(
//在屏幕中央顯示一個文本
child:new Text('carsonho demo'),
),
// 設(shè)置左側(cè)抽屜糕再，添加一個空的ListView
drawer:Drawer(
child:new Center(
//在屏幕中央顯示一個文本
child:new Text('Scafflod Drawer'),
),
),
);
}
}
- 示意圖
示意圖
3. AppBar
定義：Material風(fēng)格應(yīng)用欄，具備工具欄 & 其他小型Widget
應(yīng)用場景：用于Scaffold.appBar屬性
屬性設(shè)置
AppBar({
Key key,
this.leading, // Widget玉转，title前面的組件突想，一般是圖標(biāo)按鈕
this.automaticallyImplyLeading = true, // 配合leading使用，取決于automaticallyImplyLeading == true && leading ==null
this.title, // Widget，AppBar的標(biāo)題猾担，類型為Widget袭灯，一般顯示文本
this.actions, // Widget List，一個 Widget 列表绑嘹，代表 Toolbar 中所顯示的菜單妓蛮，對于常用的菜單，通常使用 IconButton 來表示圾叼；對于不常用的菜單通常使用 PopupMenuButton 來顯示為三個點蛤克，點擊后彈出二級菜單。
this.flexibleSpace, // Widget夷蚊，一個顯示在 AppBar 下方的控件构挤，高度和 AppBar 高度一樣，可以實現(xiàn)一些特殊的效果惕鼓，該屬性通常在 SliverAppBar 中使用筋现。
this.bottom, // PreferredSizeWidget蕊程，出現(xiàn)在應(yīng)用程序欄底部的組件路鹰，通常是一個標(biāo)簽欄（TarBar）
this.elevation, // 控制下方陰影欄的坐標(biāo)
this.backgroundColor, // 背景顏色
this.brightness, // Brightness，亮度座泳，有白色和黑色兩種主題呀邢，默認(rèn)值為 ThemeData.primaryColorBrightness洒沦。
this.iconTheme, // IconThemeData - Appbar 上圖標(biāo)的顏色、透明度价淌、和尺寸信息申眼。默認(rèn)值為 ThemeData.primaryIconTheme。
this.textTheme, // TextTheme蝉衣，Appbar 上的文字樣式括尸。
this.primary = true, // appbar是否顯示在任務(wù)欄頂部
this.centerTitle, // bool，標(biāo)題是否居中顯示病毡，默認(rèn)值根據(jù)不同的操作系統(tǒng)濒翻，顯示方式不一樣。
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.toolbarOpacity = 1.0, // 頂部欄的透明度：值1.0 = 完全不透明啦膜，值0.0 = 完全透明
this.bottomOpacity = 1.0, // 底部欄的透明度：值1.0 = 完全不透明有送，值0.0 = 完全透明
})
- 代碼演示
void main() => runApp(MyApp());
//用無狀態(tài)控件顯示
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title:'Widget_Demo',//標(biāo)題
theme:ThemeData(primarySwatch: Colors.blue),//主題色
home:MyHomePage(),// 返回一個Widget對象，用來定義當(dāng)前應(yīng)用打開的時候功戚，所顯示的界面
);
}
}
// 返回的Widget對象
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
//設(shè)置appbar
appBar:new AppBar(
title: new Text('首頁'),
leading: new Icon(Icons.home),
backgroundColor: Colors.blue,
centerTitle: true,
actions: <Widget>[ // 設(shè)置title后的WidgetList
// 非隱藏的菜單
new IconButton(
icon: new Icon(Icons.add_alarm),
tooltip: 'Add Alarm',
onPressed: () {}
),
// 隱藏的菜單
new PopupMenuButton<String>(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
gethideItem(Icons.message, '聊天', '1'),
gethideItem(Icons.group_add, '添加', '2'),
gethideItem(Icons.cast_connected, '連接', '3'),
],
onSelected: (String action) {
// 點擊選項的時候
switch (action) {
case '1':
print(1);
break;
case '2':
print(2);
break;
case '3':
print(3);
break;
}
},
),
],
),
//主體
body:new Center(
//在屏幕中央顯示一個文本
child:new Text('carsonho demo'),
),
// 設(shè)置左側(cè)抽屜娶眷，添加一個空的ListView
);
}
// 方便返回每個隱藏的菜單項
gethideItem(IconData icon, String text, String id) {
return new PopupMenuItem<String>(
value: id,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Icon(icon, color: Colors.blue),
new Text(text),
],
)
);
}
}
- 示意圖
4. 總結(jié)
- 本文主要講解了Flutter中完整頁面方面的Widget似嗤，包括
Material App啸臀、Scaffold、AppBar - 接下來推出的文章，我將繼續(xù)講解Flutter的相關(guān)知識乘粒，包括更多的Widget用法豌注、實例應(yīng)用等，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客
請點贊灯萍！因為你們的贊同/鼓勵是我寫作的最大動力轧铁！
相關(guān)文章閱讀
Android開發(fā)：最全面、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面旦棉、最易懂的Webview詳解
Android開發(fā)：JSON簡介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析
歡迎關(guān)注Carson_Ho的簡書齿风！
不定期分享關(guān)于安卓開發(fā)的干貨，追求短绑洛、平救斑、快，但卻不缺深度真屯。
