前言

• Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架，正在被越来越多的开发者和组织使用，包括阿里的咸鱼、腾讯的微信等。

  

  示意图

• 今天，我主要讲解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());

// 无状态控件显示
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

实现了基本的 Material Dsign布局，含AppBar、Body主题内容等。

• 设置属性

Scaffold({
    Key key,
    this.appBar,// 设置应用栏，显示在脚手架顶部
    this.body,// 设置脚手架内容区域控件
    this.floatingActionButton,//设置显示在上层区域的按钮，默认位置位于右下角
    this.floatingActionButtonLocation,// 设置floatingActionButton的位置
    this.floatingActionButtonAnimator,// floatingActionButtonAnimator 动画
    this.persistentFooterButtons,// 一组显示在脚手架底部的按钮(在bottomNavigationBar底部导航栏的上面)
    this.drawer,// 设置左边侧边栏
    this.endDrawer,// 设置右边侧边栏
    this.bottomNavigationBar,// 设置底部导航栏
    this.bottomSheet,// 底部抽屉栏
    this.backgroundColor,// 设置脚手架内容区域的颜色
    this.resizeToAvoidBottomPadding = true,// 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。
  })

• 具体使用

void main() => runApp(MyApp());

//用无状态控件显示
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 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用。
    this.bottom, // PreferredSizeWidget，出现在应用程序栏底部的组件，通常是一个标签栏（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，标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0, // 顶部栏的透明度：值1.0 = 完全不透明，值0.0 = 完全透明
    this.bottomOpacity = 1.0, // 底部栏的透明度：值1.0 = 完全不透明，值0.0 = 完全透明
  })

• 代码演示

void main() => runApp(MyApp());

//用无状态控件显示
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: [ // 设置title后的WidgetList
          // 非隐藏的菜单
          new IconButton(
              icon: new Icon(Icons.add_alarm),
              tooltip: 'Add Alarm',
              onPressed: () {}
          ),
          // 隐藏的菜单
          new PopupMenuButton(
            itemBuilder: (BuildContext context) => >[
              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(
        value: id,
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            new Icon(icon, color: Colors.blue),
            new Text(text),
          ],
        )
    );
  }
}

• 示意图

4. 总结

• 本文主要讲解了Flutter中完整页面方面的Widget，包括Material App、Scaffold、AppBar
• 接下来推出的文章，我将继续讲解Flutter的相关知识，包括更多的Widget用法、实例应用等，感兴趣的读者可以继续关注我的博客哦：Carson_Ho的Android博客

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

相关文章阅读
Android开发：最全面、最易懂的Android屏幕适配解决方案
Android开发：史上最全的Android消息推送解决方案
Android开发：最全面、最易懂的Webview详解
Android开发：JSON简介及最全面解析方法!
Android四大组件：Service服务史上最全面解析
Android四大组件：BroadcastReceiver史上最全面解析

欢迎关注Carson_Ho的简书！

不定期分享关于安卓开发的干货，追求短、平、快，但却不缺深度。