Flutter 完整頁面Widget：Material App、Scaffold、AppBar

前言

  • Flutter 作為Google出品的一個新興的跨平臺移動客戶端UI開發(fā)框架，正在被越來越多的開發(fā)者和組織使用，包括阿里的咸魚、騰訊的微信等。

    示意圖

  • 今天，我主要講解Flutter中完整頁面方面的Widget，包括Material App、Scaffold、AppBar，希望你們會喜歡。

示意圖

1. Material App

  • 定義：使用Material Design設計風格的應用的頂層主界面入口，包含主題顏色、標題、主顏色等。
  • 作用：包含了Material Design設計風格的應用所需要的基本控件
  • 常用屬性：
示意圖

此處詳細列出主題（Theme）的設置

示意圖
  • 代碼演示
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',//標題
      theme:ThemeData(primarySwatch: Colors.blue),//主題色
      home:MyHomePage(),// 返回一個Widget對象，用來定義當前應用打開的時候，所顯示的界面
    );
  }
}

// 返回的Widget對象
class MyHomePage extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Scaffold(
      //設置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主題內容等。

  • 設置屬性
Scaffold({
    Key key,
    this.appBar,// 設置應用欄，顯示在腳手架頂部
    this.body,// 設置腳手架內容區(qū)域控件
    this.floatingActionButton,//設置顯示在上層區(qū)域的按鈕，默認位置位于右下角
    this.floatingActionButtonLocation,// 設置floatingActionButton的位置
    this.floatingActionButtonAnimator,// floatingActionButtonAnimator 動畫
    this.persistentFooterButtons,// 一組顯示在腳手架底部的按鈕(在bottomNavigationBar底部導航欄的上面)
    this.drawer,// 設置左邊側邊欄
    this.endDrawer,// 設置右邊側邊欄
    this.bottomNavigationBar,// 設置底部導航欄
    this.bottomSheet,// 底部抽屜欄
    this.backgroundColor,// 設置腳手架內容區(qū)域的顏色
    this.resizeToAvoidBottomPadding = true,// 控制界面內容 body 是否重新布局來避免底部被覆蓋，比如當鍵盤顯示的時候，重新布局避免被鍵盤蓋住內容。
  })
  • 具體使用
void main() => runApp(MyApp());

//用無狀態(tài)控件顯示
class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'Widget_Demo',//標題
      theme:ThemeData(primarySwatch: Colors.blue),//主題色
      home:MyHomePage(),// 返回一個Widget對象，用來定義當前應用打開的時候，所顯示的界面
    );
  }
}

// 返回的Widget對象
class MyHomePage extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Scaffold(
      //設置appbar
      appBar:new AppBar(
        title:new Text('Flutter Demo'),
      ),
      //主體
      body:new Center(
        //在屏幕中央顯示一個文本
        child:new Text('carsonho demo'),
      ),
      // 設置左側抽屜，添加一個空的ListView
      drawer:Drawer(
        child:new Center(
          //在屏幕中央顯示一個文本
          child:new Text('Scafflod Drawer'),
        ),
      ),
    );
  }
}
  • 示意圖
示意圖

3. AppBar

  • 定義：Material風格應用欄，具備工具欄 & 其他小型Widget

  • 應用場景：用于Scaffold.appBar屬性

  • 屬性設置

AppBar({
    Key key,
    this.leading, // Widget，title前面的組件，一般是圖標按鈕
    this.automaticallyImplyLeading = true, // 配合leading使用，取決于automaticallyImplyLeading == true && leading ==null
    this.title, // Widget，AppBar的標題，類型為Widget，一般顯示文本
    this.actions, // Widget List，一個 Widget 列表，代表 Toolbar 中所顯示的菜單，對于常用的菜單，通常使用 IconButton 來表示；對于不常用的菜單通常使用 PopupMenuButton 來顯示為三個點，點擊后彈出二級菜單。
    this.flexibleSpace, //  Widget，一個顯示在 AppBar 下方的控件，高度和 AppBar 高度一樣，可以實現(xiàn)一些特殊的效果，該屬性通常在 SliverAppBar 中使用。
    this.bottom, // PreferredSizeWidget，出現(xiàn)在應用程序欄底部的組件，通常是一個標簽欄（TarBar）
    this.elevation, // 控制下方陰影欄的坐標
    this.backgroundColor, // 背景顏色
    this.brightness, // Brightness，亮度，有白色和黑色兩種主題，默認值為 ThemeData.primaryColorBrightness。
    this.iconTheme, // IconThemeData - Appbar 上圖標的顏色、透明度、和尺寸信息。默認值為 ThemeData.primaryIconTheme。
    this.textTheme, // TextTheme，Appbar 上的文字樣式。
    this.primary = true, // appbar是否顯示在任務欄頂部
    this.centerTitle, // bool，標題是否居中顯示，默認值根據(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',//標題
      theme:ThemeData(primarySwatch: Colors.blue),//主題色
      home:MyHomePage(),// 返回一個Widget對象，用來定義當前應用打開的時候，所顯示的界面
    );
  }
}

// 返回的Widget對象
class MyHomePage extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Scaffold(
      //設置appbar
      appBar:new AppBar(
        title: new Text('首頁'),
        leading: new Icon(Icons.home),
        backgroundColor: Colors.blue,
        centerTitle: true,
        actions: <Widget>[ // 設置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'),
      ),
      // 設置左側抽屜，添加一個空的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. 總結

  • 本文主要講解了Flutter中完整頁面方面的Widget，包括Material App、Scaffold、AppBar
  • 接下來推出的文章，我將繼續(xù)講解Flutter的相關知識，包括更多的Widget用法、實例應用等，感興趣的讀者可以繼續(xù)關注我的博客哦：Carson_Ho的Android博客

請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！

相關文章閱讀
Android開發(fā)：最全面、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面、最易懂的Webview詳解
Android開發(fā)：JSON簡介及最全面解析方法!
Android四大組件：Service服務史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析

歡迎關注Carson_Ho的簡書！

不定期分享關于安卓開發(fā)的干貨，追求短、平、快，但卻不缺深度。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容