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

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

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


欢迎关注Carson_Ho的简书!

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

版权声明:
作者:倾城
链接:https://www.techfm.club/p/14793.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>