Flutter 全栈式——页面框架

arcticfox

修改于 2020-06-11 14:06:24

2.8K0

修改于 2020-06-11 14:06:24

文章被收录于专栏：编程之路的专栏编程之路的专栏

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,
  );
}