Flutter基础(质感设计)、一

质感设计:

Material Design(质感设计),由Google推出的全新设计语言,旨在为手机、平板、台式机和其他平台提供一致、更广泛的外观和感觉。

一个质感设计的应用程序从MaterialApp控件开始,它在应用程序根目录下简历许多控件。

import 'package:flutter/material.dart';

void main(){
  runApp(new MaterialApp(
    title: "flutter质感设计",
    home: new TutorialHome(),
  ));
}
class TutorialHome extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        leading: new IconButton(
            icon: new Icon(Icons.menu),//导航图标
            tooltip: "导航菜单",
            onPressed: null),
        title: Text("实例标题"),
        actions: <Widget>[
          new IconButton(
              icon: new Icon(Icons.search),//搜索图标
              tooltip: "搜索",
              onPressed: null)
        ],
      ),
      body: new Center(
        child: new Text("质感设计"),
      ),
      floatingActionButton: new FloatingActionButton(
          tooltip: "增加",
          child: new Icon(Icons.add),//增加图标
          onPressed: null),
    );
  }
}
 MaterialApp主要属性如下:

title:在任务管理器窗口中所显示的应用名字;
theme:应用各种UI所使用的主题颜色;
color:应用的主要颜色值,也就是安卓任务管理器中所显示的颜色;
home:应用默认所显示的界面;
routes:应用的顶级当行表格,这个是多页面应用来控制页面跳转,类似网页的网址;
initlaRoute:第一个显示的路由名字,默认值为Window.defaultRouteName;
onGenerateRoute:生成路由的回调函数,当导航的命名路由的时候,会使用这个来生成界面;
onLocaleChanged : 当系统修改语言的时候,会触发å这个回调
navigatorObservers : 应用 Navigator 的监听器
debugShowMaterialGrid : 是否显示 纸墨设计 基础布局网格,用来调试 UI 的工具
showPerformanceOverlay : 显示性能标签,https://flutter.io/debugging/#performanceoverlay
checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各种调试开关
Scaffold:实现了基本的纸墨设计布局结构:
主要属性如下:
appBar:显示在界面顶部的一个AppBar;
body:当前界面所显示的主要内容Widget;
floatingActionButton:类似悬浮在页面上的功能按钮;
persistenFooterButtons:固定在下方显示的按钮;
drawer:侧边栏控件;
backgroundColor:内容的背景颜色;
bottomNavigationBar: 显示在页面底部的导航栏
resizeToAvoidBottomPadding:类似于 Android 中的 android:windowSoftInputMode=”adjustResize”,控制界面内容 body 是否重新布局来避免底部被覆盖了,比如当键盘显示的时候,重新布局避免被键盘盖住内容。默认值为 true。
AppBar 和 SliverAppBar 都是继承至 StatefulWidget 类,都代表 Toobar,二则的区别在于 AppBar 位置的固定的应用最上面的;而 SliverAppBar 是可以跟随内容滚动的。他们的主要属性如下:

leading:在标题前面显示的一个控件,在首页通常显示应用的logo,在其他界面通常显示为返回按钮,
title:Toolbar中主要内容,通常显示为当前界面的标题文字,
actions:一个Widget列表,代表Toolbar中所显示的菜单,对于常用的菜单,通常使用iconButton来表示;对于不常用的菜单通常使用PopupMenuButton来显示
button:一个AppBarBottomWidget对象,通常是TabBar,用来在Toolbar标题下面显示一个Tab导航栏;
elevation:纸墨设计中控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值;
flexibleSpace:一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用;
backgroundColor:APP bar 的颜色,默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用;
brightness:App bar 的亮度,有白色和黑色两种主题,默认值为 ThemeData.primaryColorBrightness;
iconTheme:App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme;
textTheme: App bar 上的文字样式。默认值为 ThemeData.primaryTextTheme;
centerTitle: 标题是否居中显示,默认值根据不同的操作系统,显示方式不一样
Icon、ImageIcon、IconButton参数详解:

Icon:
const Icon(this.icon, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
    this.textDirection,
  }) : super(key: key);
    size:逻辑像素中图标的大小
    color:设置图标颜色,如果没有设置以主题是黑的则图标颜色默认为白色
    semanticLabel:帮助盲人或者视力有障碍的用户提供语言辅助描述
    textDirection:渲染图标的方向,前提需要IconData.matchTextDirection字段设置为true,如Icons类里:

  static const IconData backspace = IconData(0xe14a, fontFamily: 'MaterialIcons', matchTextDirection: true);

  static const IconData backup = IconData(0xe864, fontFamily: 'MaterialIcons');

ImageIcon:
    const ImageIcon(this.image, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
  }) : super(key: key);

IconButton:
const IconButton({
    Key key,
    this.iconSize = 24.0,
    this.padding = const EdgeInsets.all(8.0),
    this.alignment = Alignment.center,
    @required this.icon,
    this.color,
    this.highlightColor,
    this.splashColor,
    this.disabledColor,
    @required this.onPressed,
    this.tooltip
  }) : assert(iconSize != null),
       assert(padding != null),
       assert(alignment != null),
       assert(icon != null),
       super(key: key);

4.2.1 EdgeInsetsGeometry  padding
在《Flutter Container 参数详解》2.3详解过,略

4.2.2 AlignmentGeometry alignment
在《Flutter Container 参数详解》2.2详解过,略

4.2.3 Widget icon
一个任意Widget控件做为icon

4.2.4 Color color
如果设置了图标点击回调,则用于按钮内图标的颜色。(笔者试不出color效果!!!)

4.2.5 Color highlightColor
按钮处于向下(按下)状态时按钮的辅助颜色。

4.2.6 Color splashColor
按钮处于向下(按下)状态时按钮的主要颜色。

初始叠加层的中心点与用户触摸事件的生命点相匹配。如果触摸持续足够长的时间,飞溅叠加将扩展以填充按钮区域。如果初始颜色具有透明度,则突出显示和按钮颜色将显示。

4.2.7 Color disabledColor
如果没设置图标点击回调,则用于按钮内图标的颜色。(笔者试不出disabledColor效果!!!)

4.2.8 VoidCallback onPressed
点击或以其他方式激活按钮时调用的回调。

如果将其设置为null,则将禁用该按钮。

4.2.9 String tooltip
描述按下按钮时将发生的操作的文本。

当用户长按按钮并用于辅助功能时,将显示此文本。


猜你喜欢

转载自blog.csdn.net/u014231961/article/details/86674547
今日推荐