1.App结构和导航

Scaffold:Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

widget详解：

在Flutter中，我们平时自定义的widget，一般都是继承自StatefulWidget或StatelessWidget（并不是只有这两种），这两种widget也是目前最常用的两种。如果一个控件自身状态不会去改变，创建了就直接显示，不会有色值、大小或者其他属性的变化，这种widget一般都是继承自StatelessWidget，常见的有Container、ScrollView等。如果一个控件需要动态的去改变或者相应一些状态，例如点击态、色值、内容区域等，那么一般都是继承自StatefulWidget，常见的有CheckBox、AppBar、TabBar等。其实单纯的从名字也可以看出这两种widget的区别，这两种widget都是继承自Widget类。

State:

在说到StatefulWidget之前，先说下State。State的作用有两点：

在widget构建的时候可以被同步读取；

在widget的生命周期中可能会被改变。

3.2.1 State生命周期

State的生命周期有四种状态：

created：当State对象被创建时候，State.initState方法会被调用；

initialized：当State对象被创建，但还没有准备构建时，State.didChangeDependencies在这个时候会被调用；

ready：State对象已经准备好了构建，State.dispose没有被调用的时候；

defunct：State.dispose被调用后，State对象不能够被构建

Flutter控件之Scaffold

Scaffold实现了基本的纸墨设计布局结构。在示例应用中，MyHomePage所返回的就是一个Scaffold。也就是说，MaterialApp的child是Scaffold Widget。

在纸墨设计中定义的单个界面上的各种布局元素，在Scaffold中都有支持，比如左边栏（Drawers）、snack bars、以及bottom sheets。

Scaffold 有下面几个主要属性：

appBar：显示在界面顶部的一个AppBar，也就是Android中的ActionBar、Toolbar

body：当前界面所显示的主要内容 Widget

floatingActionButton：纸墨设计中所定义的FAB，界面的主要功能按钮

persistentFooterButtons：固定在下方显示的按钮，比如对话框下方的确定、取消按钮

drawer：侧边栏控件

backgroundColor：内容的背景颜色，默认使用的是ThemeData.scaffoldBackgroundColor的值

bottomNavigationBar：显示在页面底部的导航栏

resizeToAvoidBottomPadding：类似于Android中的android:windowSoftInputMode=”adjustResize”，控制界面内容body是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为true。

显示snackbar或者bottom sheet的时候，需要使用当前的BuildContext参数调用Scaffold.of函数来获取ScaffoldState对象，然后使用ScaffoldState.showSnackBar和ScaffoldState.showBottomSheet函数来显示。

要特别注意Scaffold.of的参数BuildContext，如果包含该BuildContext的Widget是Scaffold的父Widget，则Scaffold.of是无法查找到对应的ScaffoldState对象的，Scaffold.of返回的是父对象中最近的Scaffold中的ScaffoldState对象。比如，如果在Scaffold的build函数中，使用build的BuildContext参数是可以的：

2.各种组件级属性

1.SingleChildScrollView组件:

    从屏幕溢出时自动开始滚动

scrollDirection:滚动的方向

3.Flutter TextStyle参数解析

const TextStyle({ 

this.inherit: true,//为false的时候不显示 

this.color,//颜色 

this.fontSize,//字号 

this.fontWeight,//字重，加粗也用这个字段FontWeight.w700 

this.fontStyle,// FontStyle.normal FontStyle.italic斜体 

this.letterSpacing, // 字符间距 就是单个字母或者汉字之间的间隔，可以是负数

this.wordSpacing,//字间距句字之间的间距 

this.textBaseline,//基线，两个值，字面意思是一个用来排字母的，一人用来排表意字的（类似中文）this.height,//当用来Text控件上时，行高（会乘以fontSize,所以不以设置过大） 

this.decoration,//添加上划线，下划线，删除线 

this.decorationColor,//划线的颜色 

this.decorationStyle,//这个style可能控制画实线，虚线，两条线，点,波浪线等 

this.debugLabel,String fontFamily,//字体String package, 

}): fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',assert(inherit != null);

4.md5加密

dart有内置的md5加密包，先引入头文件：

import 'dart:convert';

import 'package:convert/convert.dart';

import 'package:crypto/crypto.dart';

md5加密方法

// md5加密

String generateMd5(String data){

  var content = new Utf8Encoder().convert(data);

  var digest = md5.convert(content);

  //这里其实就是digest.toString()

  return hex.encode(digest.bytes);

}

5.Image属性

BoxFit.noneBoxFit.fill全图显示，显示可能拉伸，充满

BoxFit.contain全图显示，显示原比例，不需充满

BoxFit.cover显示可能拉伸，可能裁剪，充满

BoxFit.fitWidth显示可能拉伸，可能裁剪，宽度充满

BoxFit.fitHeight显示可能拉伸，可能裁剪，高度充满

BoxFit.none

BoxFit.scaleDown效果和contain差不多,但是此属性不允许显示超过源图片大小，可小不可大

6.TextField组件

const TextField({

    Key key,

    this.controller,            //控制器，控制TextField文字

    this.focusNode,

    this.decoration: const InputDecoration(),      //输入器装饰

    TextInputType keyboardType: TextInputType.text, //输入的类型

    this.style,

    this.textAlign: TextAlign.start,

    this.autofocus: false,

    this.obscureText: false,  //是否隐藏输入

    this.autocorrect: true,

    this.maxLines: 1,

    this.maxLength,

    this.maxLengthEnforced: true,

    this.onChanged,            //文字改变触发

    this.onSubmitted,          //文字提交触发（键盘按键）

    this.inputFormatters,

    this.enabled,

  })

7. DrawerHeader和UserAccountsDrawerHeader组件

DrawerHeader

通常用于在抽屉中在顶部展示一些基本信息；其包含如下属性：

decoration：header区域的decoration，通常用来设置背景颜色或者背景图片

duration和curve：如果decoration发生了变化，则会使用curve设置的变化曲线和duration设置的动画时间来做一个切换动画

child: Header里面所显示的内容控件

padding: Header里面内容控件的padding值，如果child为null，则这个值无效

margin:Header四周的间隙

如果想在DrawerHeader中显示用户账户信息，比如类似于Gmail的联系人头像、用户名、Email等信息，则可以使用UserAccountsDrawerHeader这个特殊的DrawerHeader。

UserAccountsDrawerHeader

UserAccountsDrawerHeader可以设置用户头像、用户名、Email等信息，显示一个符合MD规范的drawer header。其常用属性如下：

margin:Header四周的间隙

decoration:header区域的decoration，通常用来设置背景颜色或者背景图片

currentAccountPicture：用来设置当前用户的头像

otherAccountsPictures：用来设置当前用户的其他账号的头像(做多显示三个)

accountName：当前用户的名字

accountEmail：当前用户的Email

onDetailsPressed：当accountName或者accountEmail被点击的时候所触发的回调函数，可以用来显示其他额外的信息

8.Flutter 控件之 AppBar 和 SliverAppBar

leading：在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮

title： Toolbar 中主要内容，通常显示为当前界面的标题文字

actions：一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单

bottom：一个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： 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样

decoration:属性

—-阴影效果

decoration:new BoxDecoration(

      color: Colors.white,

      boxShadow:[

        BoxShadow(

            offset: Offset(0.0,0.0),

            //color: Color.fromRGBO(16, 20, 188, 1.0),

            blurRadius: 20.0,

            spreadRadius: -16.0)

      ],

      border:new Border(top:new BorderSide(color: Colors.white12))),

);

—透明

const Color(0x000099ff), //0x 后面开始 两位FF表示透明度16进制，

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/17566.html