Flutter中组件

1.App结构和导航

Scaffold:Material Design布局结构的基本实现。此类提供了用于显示drawersnackbar和底部sheetAPI

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. DrawerHeaderUserAccountsDrawerHeader组件

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进制,

你可能感兴趣的:(Flutter中组件)