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工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/17566.html