Flutter 完整页面Widget:Material App、Scaffold、AppBar


前言

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

    示意图

  • 今天,我主要讲解Flutter中完整页面方面的Widget,包括Material AppScaffoldAppBar,希望你们会喜欢。

示意图

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: <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 AppScaffoldAppBar
  • 接下来推出的文章,我将继续讲解Flutter的相关知识,包括更多的Widget用法、实例应用等,感兴趣的读者可以继续关注我的博客哦:Carson_Ho的Android博客

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

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


欢迎关注Carson_Ho的简书!

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345