专栏首页编程之路的专栏Flutter 全栈式——页面框架

Flutter 全栈式——页面框架

Material Design是由Google推出的全新设计语言,这种设计语言旨在为手机、平板电脑等平台提供更一致、更广泛的外观和感觉。Material Design是一种有质感的设计风格,还会提供一些默认的交互动画。

对于没有相关基础的人,在正式学习App的UI之前,建议先了解Material Design相关的知识

关于Material Design设计风格的资料

MaterialApp

MaterialApp代表使用Material设计风格的应用,里面包含了其所需要的基本控件。一个完整的Flutter项目是由这个主组件开始的。

MaterialApp属性详解

属性

类型

简述

home

Widget

主页。用于指定当前App打开时显示的页面

routes

Map<String, WidgetBuilder>

路由表,定义页面跳转规则

initialRoute

String

初始路由名称

onGenerateRoute

RouteFactory

通过pushNamed跳转路由页面时,在routes查找不到时回调

onUnknownRoute

RouteFactory

onGenerateRoute 无法生成路由时调用

navigatorObservers

List<NavigatorObserver>

导航的监听器列表

builder

TransitionBuilder

构建Widget前调用, 一般做字体大小,方向,主题颜色等配置

title

String

应用标题。出现在Android任务管理器的程序快照之上 ,或iOS的程序切换管理器中

onGenerateTitle

GenerateAppTitle

与title一样,但含有一个context参数用于做本地化

theme

ThemeData

应用程序的主题,各种的定制颜色都可以设置,用于程序主题切换

darkTheme

ThemeData

深色模式下的主题

themeMode

ThemeMode

用于设定主题模式

color

Color

应用的主颜色值

locale

Locale

用于本地化。如果为null则使用当前系统区域

localizationsDelegates

Iterable<LocalizationsDelegate<dynamic>>

本地化委托,用于更改Widget默认的提示语,按钮text等

localeListResolutionCallback

LocaleListResolutionCallback

该回调负责在应用启动时以及用户更改设备的区域设置时选择应用的区域设置

localeResolutionCallback

LocaleResolutionCallback

当传入的是不支持的语种,可通过该回调做相应处理

supportedLocales

Iterable<Locale>

传入支持的语种列表

showPerformanceOverlay

bool

用于性能测试。

checkerboardRasterCacheImages

bool

为true时,打开光栅缓存图像的棋盘格

checkerboardOffscreenLayers

bool

为true时,打开棋盘格层

showSemanticsDebugger

bool

为true时,打开Widget边框,显示布局边界

debugShowCheckedModeBanner

bool

为true时,在debug模式下显示右上角的debug横幅

debugShowMaterialGrid

bool

debug模式下是否显示Material网格

// 在构建UI前,设置一些属性
MaterialApp(
      builder: (BuildContext context, Widget child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(
                textScaleFactor: 1.4,
              ),
          child: child,
        );
      },
    );

Scaffold

Scaffold是App的页面框架,将整个页面分为如下的几个部分

Scaffold属性

属性

类型

简述

appBar

PreferredSizeWidget

界面顶部的一栏控件,相当于 Android 中的 ActionBar

body

Widget

当前页面所显示的主要内容

floatingActionButton

Widget

Material中所定义的FAB,是一个悬浮的功能按钮

floatingActionButtonLocation

FloatingActionButtonLocation

设定悬浮按钮的位置

floatingActionButtonAnimator

FloatingActionButtonAnimator

悬浮按钮动画

persistentFooterButtons

List<Widget>

在底部显示的一组按钮

drawer

Widget

开始部分的(左边)抽屉菜单

endDrawer

Widget

结束部分的(右边)抽屉菜单

drawerScrimColor

Color

打开侧滑菜单时遮盖在主要内容区的蒙层颜色

backgroundColor

Color

内容的背景颜色。默认为 ThemeData.scaffoldBackgroundColor

bottomNavigationBar

Widget

显示在底部的导航栏

bottomSheet

Widget

底部永久性显示的提示框

resizeToAvoidBottomInset

bool

页面浮动控件部分自动调整,以避免被弹出键盘所遮盖,默认为true

primary

bool

是否填充顶部栏,默认为true

drawerDragStartBehavior

DragStartBehavior

处理拖动开始行为的方式

drawerEdgeDragWidth

double

水平滑动将要打开侧滑菜单的区域的宽度

extendBody

bool

若为true且指定了bottomNavigationBar或者persistentFooterButtons则body将延伸到Scaffold的底部

extendBodyBehindAppBar

bool

作用类似extendBody,但延伸的位置是AppBar

AppBar

AppBar可以显示顶部leading、title和actions等内容。底部通常为选项卡TabBar。flexibleSpace显示在AppBar的下方,高度和AppBar高度一样,可以实现一些特殊的效果

文档地址

示例

BottomAppBar

BottomAppBar 是一个不规则底部工具栏,它比BottomNavigationBar 灵活,可以放置文字和图标等等控件。

文档地址

示例

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Sample Code'),
    ),
    body: Center(
      child: Text('You have pressed the button'),
    ),
    bottomNavigationBar: BottomAppBar(
      shape: const CircularNotchedRectangle(),
      child: Container(height: 50.0,),
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.add),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  );
}

视频课程

博主发布的相关视频课程

Flutter全栈式开发之Dart 编程指南

二维码

Flutter 全栈式开发指南

快速上手篇直接观看

本文分享自微信公众号 - 编程之路从0到1(artofprogram),作者:编程之路从0到1

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python小白的数据库入门

    sqlite3 以上两个是主流的关系型数据库,我们观察之后发现,它们与我们熟知的Excel好像也没有什么不同。关系型数据库里面放的都是一张张的表,就如同Exce...

    arcticfox
  • Python 爬虫之Selenium终极绝招

    这里简单解释一下什么是Selenium,它其实是一个网站前端压力测试框架,更通俗的说,它能直接操作浏览器,试想一下,网页是在浏览器里面加载的,如果我们能用代码操...

    arcticfox
  • 5. 计算机与网络

    我们在网络中发邮件发信息,这个过程实际上和邮政系统是非常相似的。年轻一代朋友可能没有写纸信的经验,在寄信前,必须先写好信封,信封上有几个重要的信息,首先是收件人...

    arcticfox
  • Web前端进阶之路:提升前端开发效率

    低效的7大原因: 消极的心态,身体状态不好,目标不明确,思路不清晰,工作被打断,杂乱无章,做可被替代的重复劳动。

    Joel
  • Hive Join优化

    在阐述Hive Join具体的优化方法之前,首先看一下Hive Join的几个重要特点,在实际使用时也可以利用下列特点做相应优化:

    大数据学习与分享
  • Hive Join优化

    在阐述Hive Join具体的优化方法之前,首先看一下Hive Join的几个重要特点,在实际使用时也可以利用下列特点做相应优化:

    大数据学习与分享
  • 博客文章和文档迁移到gitbook

    使用*Markdown*写blog已经很久了,近期接触并且看了下流传已久的gitbook平台,感觉做得确实不错。、

    owent
  • Laravel源码解析之用户认证系统(一)

    使用过Laravel的开发者都知道,Laravel自带了一个认证系统来提供基本的用户注册、登录、认证、找回密码,如果Auth系统里提供的基础功能不满足需求还可以...

    KevinYan
  • Jenkins 多环境 CI/CD 架构设计

    自动化部署主要是为了解决项目多、环境多、持续集成慢、部署操作麻烦、手动操作易出错、自动化运维等问题。

    DevOps持续交付
  • 如何在linux服务上创建samba文件共享服务

    service smb status/stop/start/restart smb服务的状态开启停止重启

    java攻城狮

扫码关注云+社区

领取腾讯云代金券